@color-blue: #00A5FF;
@color-yellow: #FFA500;
@color-orange: #FF5400;
@color-red: #FF0000;

* {
  margin: 0;
  padding: 0;
  color: #333;
  user-select: none;
  font-family: Microsoft YaHei;
}

input,
button,
select,
textarea {
  outline: none;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

img {
  vertical-align: middle;
}

body {
  min-width: 1200px;
}

.header-hr {
  height: 155px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: @color-blue;
  border-color: @color-blue;
}

.el-checkbox__inner:hover {
  border-color: @color-blue;
}

/* 顶部 */
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 995;
  background-color: #fff;
  height: 105px;

  .h-center {
    width: 1200px;
    margin: 0 auto;
    padding-top: 18px;
    overflow: hidden;

    .hc-left {
      float: left;
      display: flex;
      align-items: center;

      .hcl-logo {
        width: auto;
        height: 66px;
        margin-right: 8px;

        img {
          height: 100%;
        }
      }

      .hcl-title {
        font-size: 12px;
        color: @color-blue;
      }
    }

    .hc-right {
      float: right;

      &.left {
        float: left;
        margin-left: 20px;
      }

      .hcr-search {
        width: 184px;
        height: 26px;
        line-height: 26px;
        border-radius: 26px;
        border: 1px solid @color-blue;
        box-sizing: border-box;
        position: relative;

        .s-input {
          border: 0;
          background-color: unset;
          width: 100%;
          height: 24px;
          line-height: 24px;
          padding: 0 34px 0 10px;
          font-size: 12px;
          display: block;
          box-sizing: border-box;

          &::placeholder {
            font-size: 12px;
          }
        }

        .s-button {
          position: absolute;
          top: 50%;
          right: 10px;
          transform: translateY(-50%);
          z-index: 1;
          width: 16px;
          height: 16px;
          background: url(/images/icon-sousuo.png) center / 16px no-repeat;
        }
      }

      .hcr-phone {
        margin-top: 10px;
        display: flex;
        align-items: center;

        .p-icon {
          width: 30px;
          height: 30px;
          border-radius: 30px;
          margin-right: 5px;
          background: @color-blue url(/images/icon-phone.png) center / 20px no-repeat;
        }

        .p-num {
          font-weight: bold;
          color: @color-blue;
          font-size: 20px;
        }
      }

      .hcr-tool {
        width: 88px;
        box-sizing: border-box;
        border-radius: 30px;
        padding: 0 10px;
        background-color: @color-blue;

        &::after {
          content: '';
          clear: both;
          display: block;
        }

        .hcrt-a {
          float: left;
          height: 30px;
          line-height: 30px;
          margin: 0 5px;
          color: #fff;
          font-size: 12px;
  
          &:hover {
            text-decoration: underline;
          }
        }
      }

      .hcr-notice {
        display: block;
        margin-top: 10px;
        font-size: 12px;
        color: #999;
      }
    }
  }
}

/* 导航 */
.nav {
  position: fixed;
  top: 105px;
  right: 0;
  left: 0;
  z-index: 995;
  background-color: @color-blue;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .1);

  .n-center {
    width: 1200px;
    height: 50px;
    margin: 0 auto;

    &::after {
      content: '';
      display: block;
      clear: both;
    }

    .nc-ul {
      float: left;
      overflow: hidden;

      &::after {
        content: '';
        display: block;
        clear: both;
      }

      .ncu-li {
        float: left;
        width: 103px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        position: relative;

        .ncul-a {
          color: #fff;
          font-size: 16px;
          position: relative;
          display: block;
          transition: all .3s;
        }

        &:before {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          left: 0;
          height: 0;
          box-sizing: border-box;
          background-color: #fff;
          border-top: 4px solid @color-blue;
          transition: all .3s;
        }

        &.on::before, &:hover::before {
          height: 50px;
          bottom: -1px;
          transition: all .3s;
        }

        &.on .ncul-a,&:hover .ncul-a {
          color: @color-blue;
          font-weight: bold;
          transition: all .3s;
        }
      }
    }

    .nc-inline {
      float: left;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .nci-input {
        float: left;
        width: 580px;
        border: 0;
        height: 40px;
        margin-top: 5px;
        padding: 0 10px;
      }

      .nci-button {
        float: left;
        margin-top: 5px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: block;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        background-color: @color-yellow;
      }

      .nci-hot {
        float: left;
        margin-top: 5px;

        &::after {
          content: '';
          clear: both;
          display: block;
        }

        .ncih-a {
          float: left;
          width: 74px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: @color-yellow;
          color: #fff;
          font-size: 14px;
          margin-left: 5px;
        }
      }
    }

    .chat-a {
      float: right;
      width: 184px;
      height: 50px;
      background-color: @color-yellow;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .ca-text {
        color: #fff;
        margin-right: 9px;
        font-size: 18px;
      }

      .ca-icon {
        width: 8px;
        height: 14px;
        background: url(/images/icon-you.png) center / 14px no-repeat;
      }

      &.chat-a-shop {
        width: 179px;
        height: 40px;
        line-height: 40px;
        margin-top: 5px;
        
        .ca-text {
          font-weight: normal;
          font-size: 14px;
        }

        .ca-icon {
          background-size: 12px;
        }
      }
    }
  }
}

/* 轮播图 */
.banner {
  position: relative;
  overflow: hidden;
  
  .b-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff;
    font-size: 48px;

    &.yxxwzzz-b-title {
      font-style: italic;
      font-weight: bold;
    }
  }

  .b-ul {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 571px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    .bu-li {
      padding-top: 14px;
      
      .bul-cover {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
      }

      .bul-text {
        margin-top: 14px;
        text-align: center;

        .bult-a {
          font-size: 16px;
          color: #fff;
        }
      }
    }
  }
}

/* 首页 */
.company {
  padding-top: 120px;

  .c-center {
    width: 1200px;
    margin: 0 auto;

    .cc-info {
      display: flex;
      align-items: flex-start;


      .cci-cover {
        width: 600px;
        height: 350px;
        object-fit: cover;
      }

      .cci-items {
        flex: 1;
        padding-left: 59px;
        overflow: hidden;

        .ccii-title {
          font-size: 24px;
          padding-bottom: 10px;
          position: relative;
          color: #030303;

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 32px;
            height: 1px;
            background-color: #333;
          }
        }

        .ccii-desc {
          margin-top: 60px;
          font-size: 14px;
          line-height: 24px;
          color: #666666;
          overflow: hidden;
        }
      }
    }

    .cc-merit {
      margin-top: 60px;
      display: flex;
      align-items: flex-start;
      justify-content: space-around;

      .ccm-li {
        text-align: center;

        .ccml-icon {
          width: 100px;
          height: 100px;
          border-radius: 100px;
          display: block;
          margin: 0 auto;
          // background-color: @color-blue;

          &.icon1 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/5c275b7d65fe4688a9f8187c07c3c015.png) center / 100px no-repeat;
          }

          &.icon2 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/8557949f3f4a40319f75e9bb5aeedf29.png) center / 100px no-repeat;
          }

          &.icon3 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/0a47efb97f694631bd356dfcddc4738a.png) center / 100px no-repeat;
          }

          &.icon4 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/48b676a47df9420593f0d707aa60e1b7.png) center / 100px no-repeat;
          }
        }

        .ccml-text {
          margin-top: 26px;
          font-size: 20px;
          font-family: Adobe Heiti Std;
        }
      }
    }
  }
}

.foryou {
  margin-top: 120px;

  .f-center {
    width: 1200px;
    margin: 0 auto;

    .fc-title {
      overflow: hidden;

      .fct-ch {
        font-size: 36px;
        text-align: center;
      }

      .fct-en {
        position: relative;
        display: flex;
        justify-content: center;

        .line {
          width: calc(100% - 128px);
          height: 1px;
          background: linear-gradient(to right, #fff, @color-blue, #fff);
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }

        .text {
          position: relative;
          background-color: #fff;
          padding: 0 17px;
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .fc-list {
      margin-top: 33px;

      .fcl-ul {
        margin-left: -4px;

        .fclu-li {
          float: left;
          width: 196px;
          height: 234px;
          border: 1px solid #F0F0F0;
          margin-left: 4px;
          box-sizing: border-box;
          position: relative;

          .cover {
            height: 149px;
            display: flex;
            align-items: center;
            justify-content: center;

            &.icon1 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/580acbcb08684996b50a200b76761fe6.png) center no-repeat;
            }

            &.icon2 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/e696906a5f9e44dd85761a0d45da575b.png) center no-repeat;
            }
            
            &.icon3 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/ed980af75ada49fe899b9938a5c54d78.png) center no-repeat;
            }
            
            &.icon4 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/33422cae3716450d9618f6dba45b0508.png) center no-repeat;
            }
            
            &.icon5 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/4bb6e6badec04a44864b5f8d75c6de34.png) center no-repeat;
            }
            
            &.icon6 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/69c07630813e41ad83c6b74d87b347f9.png) center no-repeat;
            }
          }

          .text {
            text-align: center;
            font-size: 18px;
            line-height: 30px;
          }
        }

        &::after {
          content: '';
          clear: both;
          display: block;
        }
      }
    }
  }
}

.engine {
  margin-top: 120px;

  .e-center {
    width: 1200px;
    margin: 0 auto;

    .ec-city {
      background-color: @color-blue;
      overflow: hidden;

      .ecc-title {
        margin-top: 40px;
        margin-left: 30px;
        color: #fff;
        font-weight: bold;
        font-size: 24px;
      }

      .ecc-list {
        margin-top: 30px;
        margin-left: 40px;
        
        &::after {
          content: '';
          clear: both;
          display: block;
        }

        a {
          float: left;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          margin: 0 60px 20px 0;
        }
      }
    }

    .ec-project {
      height: 78px;
      line-height: 78px;
      background-color: #f5f5f5;
      padding-left: 40px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      a {
        float: left;
        font-weight: bold;
        font-size: 18px;
        margin-right: 60px;
      }
    }

    .ec-data {
      width: 100%;
      margin-top: 40px;
      overflow: hidden;

      .ecd-ul {
        margin-left: -32px;

        &::after {
          content: '';
          clear: both;
          display: block;
        }

        .ecdu-li {
          float: left;
          width: 276px;
          margin: 0 0 32px 32px;
          box-sizing: border-box;
          border: 1px solid #e6e6e6;

          .cover {
            height: 200px;
            display: block;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: all .3s;
            }

            &:hover img {
              transform: scale(1.1);
              transition: all .3s;
            }
          }

          .title {
            font-size: 16px;
            background-color: #f1f1f1;
            display: block;
            height: 56px;
            line-height: 56px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all .3s;
          }

          &:hover .title {
            background-color: @color-blue;
            color: #fff;
            transition: all .3s;
          }
        }
      }
    }
  }
}

.news {
  width: 1200px;
  margin: 56px auto 0;

  .n-content {
    margin-left: -32px;

    &::after {
      content: '';
      clear: both;
      display: block;
    }

    .nc-dl {
      float: left;
      width: 584px;
      display: flex;
      align-items: flex-start;
      margin: 0 0 40px 32px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .ncd-cover {
        width: 240px;
        height: 240px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all .3s;

          &:hover {
            transition: all .3s;
            transform: scale(1.1);
          }
        }
      }

      .ncd-list {
        flex: 1;
        padding-left: 20px;
        overflow: hidden;

        .ncdl-title {
          line-height: 18px;
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            max-width: 100%;
            font-weight: bold;
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .more {
            color: #999;
            font-size: 12px;
            white-space: nowrap;
          }
        }

        .ncdl-a {
          padding: 10px 0;
          display: flex;
          align-items: center;
          border-bottom: 1px dashed #F1F1F1;
          overflow: hidden;

          &:last-child {
            border-bottom: 0;
            padding-bottom: 0;
          }

          .num {
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            background-color: #ccc;
            color: #fff;
            font-size: 12px;
            margin-right: 10px;

            &.orange {
              background-color: @color-orange;
            }
          }

          .title {
            flex: 1;
            font-size: 14px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all .3s;
          }

          &:hover .title {
            color: @color-blue;
            transition: all .3s;
          }
        }
      }
    }
  }
}

.about {
  margin-top: 123px;

  .a-center {
    width: 1200px;
    margin: 0 auto;

    .ac-row {
      position: relative;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .circular1 {
        width: 29px;
        height: 29px;
        border-radius: 29px;
        background: linear-gradient(0deg, #DBF7FF, #4C98F5);
        position: absolute;
        top: 0;
        right: 23px;
        z-index: 2;
      }

      .circular2 {
        width: 206px;
        height: 206px;
        border-radius: 206px;
        background: linear-gradient(0deg, #DBF7FF, #5CC1E6);
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        opacity: 0.5;
      }

      .circular3 {
        width: 264px;
        height: 264px;
        border-radius: 264px;
        background: linear-gradient(0deg, #A7C6ED, #DBF7FF);
        position: absolute;
        top: 117px;
        right: 133px;
        z-index: 2;
        opacity: 0.5;
      }

      .circular4 {
        width: 45px;
        height: 45px;
        border-radius: 45px;
        background: linear-gradient(0deg, #93C2FC, #DBF7FF);
        position: absolute;
        bottom: 0;
        right: 400px;
        z-index: 1;
      }

      .acr-cover {
        width: 648px;
        height: 400px;
      }

      .acr-content {
        width: 510px;
        height: 300px;
        background-color: #fff;
        box-shadow: 0px 36px 21px 0px rgba(0, 0, 0, .08);
        position: absolute;
        top: 50%;
        left: 581.5px;
        transform: translateY(-50%);
        z-index: 3;
        overflow: hidden;

        .acrc-title {
          font-weight: bold;
          font-size: 18px;
          margin: 40px 29px 0;
          padding-bottom: 11px;
          position: relative;

          &::after {
            content: '';
            width: 37px;
            height: 1px;
            background-color: #333;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }

        .acrc-desc {
          margin: 40px 29px 29px;
          font-size: 14px;
          line-height: 24px;
          color: #666;
        }
      }
    }
  }
}

.links {
  padding: 120px 0;

  .l-center {
    width: 1200px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: bold;
  }
}

.contact {
  background-color: #006196;
  overflow: hidden;

  .c-center {
    width: 1200px;
    margin: 0 auto;

    .cc-tips {
      color: #fff;
      margin-top: 39px;
      font-size: 18px;

      span {
        color: #fff;
        font-size: 14px;
      }
    }

    .form {
      width: 100%;
      margin-top: 29px;
      overflow: hidden;

      .f-row {
        margin-left: -20px;
        margin-bottom: 30px;

        &::after {
          content: '';
          clear: both;
          display: block;
        }

        .f-input {
          float: left;
          width: 386px;
          height: 46px;
          background-color: #fff;
          border: 0;
          padding: 0 20px;
          box-sizing: border-box;
          font-size: 14px;
          margin-left: 20px;
          color: #006196;
  
          &::placeholder {
            color: #006196;
          }
        }
  
        .f-select {
          float: left;
          width: 386px;
          height: 46px;
          border: 0;
          background-color: #fff;
          padding: 0 20px;
          margin-left: 20px;
          box-sizing: border-box;
          color: #006196;
          font-size: 14px;
        }

        .f-button {
          width: 236px;
          height: 46px;
          background-color: @color-blue;
          color: #fff;
          margin-left: 20px;
          border: 0;
          font-size: 18px;
          font-weight: bold;
          cursor: pointer;
        }

        .f-textarea {
          width: 793px;
          height: 200px;
          background-color: #fff;
          box-sizing: border-box;
          padding: 16px 20px;
          font-size: 14px;
          border: 0;
          margin-left: 20px;
          color: #006196;
          resize: none;

          &::placeholder {
            color: #006196;
          }
        }
      }
    }
  }
}

/* 网站建设 */
.wzjs-tab-bg {
  background-color: #E4F2FF;
  padding: 119px 0 130px;

  .t-center {
    width: 1200px;
    margin: 0 auto;

    .tc-title {
      font-size: 36px;
      text-align: center;
    }

    .tc-desc {
      margin-top: 20px;
      text-align: center;
      font-size: 18px;
    }

    .t-list {
      margin-top: 60px;

      .tl-ul {
        margin-left: -24px;
        display: flex;
  
        .tlu-li {
          width: 282px;
          margin-left: 24px;
          box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, .09);
          background-color: #fff;
          transition: all .3s;
  
          .cover {
            width: 100%;
            height: 200px;
            position: relative;
            overflow: hidden;

            .mask {
              position: absolute;
              top: 0;
              right: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, .5);
              transition: all .3s;
            }
  
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .tips {
              color: #fff;
              font-size: 20px;
              line-height: 40px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 1;
            }
          }

          .describe {
            padding: 24px 40px;

            a {
              font-size: 14px;
              line-height: 24px;
            }
          }

          &:hover {
            transform: translateY(-20px);
            transition: all .3s;

            .cover .mask {
              background-color: rgba(0, 165, 255, .5);
              transition: all .3s;
            }
          }
        }
      }
    }
  }
}

.wzjs-introduce {
  background-color: #fff;
  padding-top: 120px;

  .wi-center {
    width: 1200px;
    margin: 0 auto;

    .wic-title {
      text-align: center;
      font-size: 36px;
    }

    .wic-desc {
      margin-top: 20px;
      text-align: center;
      font-size: 18px;
    }

    .wi-content-1 {
      margin-top: 60px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .wic1-cover {
        width: 612px;
        float: left;
      }

      .wic1-items {
        float: left;
        padding-left: 70px;

        .title {
          font-size: 24px;
          font-weight: bold;
          padding-bottom: 14px;
          position: relative;

          &::after {
            content: '';
            width: 32px;
            height: 1px;
            background-color: #333;
            position: absolute;
            bottom: 0;
            left: 0;
          }
        }

        .desc {
          margin-top: 40px;
          font-size: 14px;
          line-height: 24px;
        }

        .label-ul {
          margin-top: 80px;
          margin-left: -48px;

          &::after {
            content: '';
            clear: both;
            display: block;
          }

          .lu-li {
            float: left;
            margin-left: 48px;

            .ll-cover {
              width: 80px;
              height: 80px;
              background-color: #F7F7F7;

              &.icon1 {
                background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/a49d786bfd1d4888b161993b68ef7905.png) center / 80px no-repeat;
              }

              &.icon2 {
                background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/e74aee6ce12a45b285bff8acc86b23d0.png) center / 80px no-repeat;
              }

              &.icon3 {
                background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/6596ffd6a59a43d4b40141620801cb53.png) center / 80px no-repeat;
              }

              &.icon4 {
                background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/2ac529708c4a4c57b03e6e9e48b99b62.png) center / 80px no-repeat;
              }
            }

            .ll-text {
              text-align: center;
              font-size: 14px;
              margin-top: 20px;
            }
          }
        }
      }
    }

    .wi-content-2 {
      margin-top: 120px;

      .wic2-title {
        text-align: center;
        font-size: 36px;
        color: #262933;
      }

      .wic2-items {
        margin-top: 54px;
        display: flex;
        align-items: center;

        .wic2i-left {
          width: 568px;
          height: 584px;
          margin-right: 176px;
          position: relative;

          .hexagon {
            position: absolute;
            top: 0;
            left: 0;
            width: 108px;
            height: 188px;
            background-color: #E4F2FF;
            margin: 0 56px;
            display: flex;
            align-items: center;
            justify-content: center;

            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 188px;
              height: 108px;
              background-color: #E4F2FF;
              transform: translate(-50%, -50%) rotate(30deg);
            }

            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 188px;
              height: 108px;
              background-color: #E4F2FF;
              transform: translate(-50%, -50%) rotate(-30deg);
            }

            &.blue, &.blue::before, &.blue::after {
              background-color: @color-blue;
            }

            &.yellow, &.yellow::before, &.yellow::after {
              background-color: @color-yellow;
            }

            .words {
              position: relative;
              z-index: 1;

              .w-title {
                font-size: 18px;
                color: #fff;
              }
  
              .w-desc {
                margin-top: 10px;
                font-size: 14px;
                color: #fff;
              }
            }

            .cover {
              position: relative;
              z-index: 1;
              width: 118px;
            }

            &.p1 {
              top: 99px;
            }

            &.p2 {
              left: 174px;
            }

            &.p3 {
              top: 99px;
              left: 348px;
            }

            &.p4 {
              top: 198px;
              left: 174px;
              z-index: 2;
            }

            &.p5 {
              top: 297px;
            }

            &.p6 {
              top: 396px;
              left: 174px;
            }

            &.p7 {
              top: 297px;
              left: 348px;
            }
          }
        }

        .wic2i-right {
          flex: 1;
          overflow: hidden;
          
          .advantage {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            &:last-child {
              margin-bottom: 0;
            }

            .icon-check {
              width: 24px;
              height: 24px;
              background: url(/images/icon-check.png) center / 24px no-repeat;
              margin-right: 10px;
            }

            .word {
              flex: 1;
              font-size: 14px;
              line-height: 24px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              .blue {
                color: @color-blue;
              }
            }
          }

          .advantage-button {
            margin-top: 60px;
            padding-left: 34px;

            .btn {
              color: #fff;
              width: 235px;
              height: 42px;
              line-height: 42px;
              text-align: center;
              background-color: @color-blue;
              border: 0;
              font-size: 18px;
              font-weight: bold;
              opacity: 1;
              transition: all .3s;
              display: block;
              cursor: pointer;

              &:hover {
                opacity: .8;
                transition: all .3s;
              }
            }
          }
        }
      }
    }

    .wi-content-3 {
      margin-top: 120px;
      padding-bottom: 80px;

      .wic3-title {
        text-align: center;
        font-size: 36px;
        color: #444;
      }

      .wic3-label {
        display: flex;
        justify-content: space-between;
        margin-top: 60px;

        .wic3l-li {
          display: flex;
          align-items: center;

          .cover {
            width: 80.5px;
            height: 80.5px;
            border-radius: 50%;
            border: 2px solid #676767;
            margin-right: 20px;

            &.icon1 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/74106b87d3384d6c8930f9f5db9b6fe3.png) center / auto 40px no-repeat;
            }

            &.icon2 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/011162de976f4a3f8cfad3e3a8b940db.png) center / auto 40px no-repeat;
            }

            &.icon3 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/76650137d17a46e083f0bb5e6af30070.png) center / auto 40px no-repeat;
            }

            &.icon4 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/53adc0a9843e4c5cb3a3d6772f3db603.png) center / auto 40px no-repeat;
            }
          }

          .items {
            flex: 1;
            padding-right: 20px;
            overflow: hidden;

            .i-title {
              font-size: 18px;
              color: #666666;
              overflow: hidden;
            }

            .i-desc {
              font-size: 14px;
              margin-top: 10px;
              color: #666666;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}

/* 网站优化 */
.wzyh-ranking {
  background-color: #F2F2F2;
  padding-top: 119px;

  .wr-center {
    width: 1200px;
    margin: 0 auto;

    .wrc-problem {
      text-align: center;

      .title {
        font-size: 36px;
      }

      .desc {
        margin-top: 40px;
        font-size: 18px;
      }
    }

    .wrc-form {
      margin-top: 39px;
      text-align: center;
      display: flex;
      justify-content: center;

      .wrcf-input {
        margin-right: 20px;
        width: 400px;
        height: 60px;
        background-color: #fff;
        border: 0;
        padding: 0 20px;
        font-size: 14px;
        
        &:last-child {
          margin-right: 0;
        }
      }
    }

    .wrc-form-btn {
      width: 500px;
      margin: 40px auto 0;
      position: relative;
      padding-bottom: 157px;

      .btn {
        width: 100%;
        height: 60px;
        background-color: @color-blue;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        border: 0;
        cursor: pointer;
        transition: all .3s;

        &:hover {
          opacity: .8;
          transition: all .3s;
        }
      }

      .arrow {
        width: 165px;
        height: 87px;
        background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221104/b8d2b6b4db2b458e812836fb9c93cd38.png) center / 165px no-repeat;
        position: absolute;
        top: 60px;
        right: 0;
      }
    }
  }
}

.wzyh-diagnosis {
  background-color: #fff;
  padding-top: 97px;

  .wd-title {
    font-size: 36px;
    text-align: center;
    color: #262933;
  }

  .wd-content {
    margin-top: 60px;
    padding: 60px 0 40px;
    background: linear-gradient(to right, @color-blue calc(50% - 78px), #1A1A1A 0);

    .wdc-center {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;

      .wdcc-cover {
        width: 618px;
        height: 476px;
        margin-right: 40px;
      }

      .wdcc-items {
        flex: 1;
        overflow: hidden;
        
        .wdcci-dl {
          display: flex;
          align-items: center;
          margin-bottom: 75px;

          &:last-child {
            margin-bottom: 0;
          }

          .icon {
            width: 55px;
            height: 55px;

            &.icon1 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/17bc66c9edaa4ee2a090ec6bda92414a.png) center / 54px no-repeat;
            }

            &.icon2 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/7db797d8ee98407d8cb190cf6e54a5e7.png) center / 54px no-repeat;
            }

            &.icon3 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/57b3288289484a7db0b81e681f4f388a.png) center / 54px no-repeat;
            }
          }

          .label {
            margin-left: 28px;

            .l-name {
              font-size: 25px;
              font-weight: bold;
              color: #fff;
              padding-bottom: 6px;
              border-bottom: 3px solid #F8F8F8;
              display: inline-block;
            }

            .l-desc {
              font-size: 14px;
              color: #999;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}

.wzyh-reason {
  padding-top: 155px;

  .wr-center {
    width: 1200px;
    margin: 0 auto;

    .wrc-title {
      font-size: 36px;
      text-align: center;
    }

    .wrc-swiper {
      margin-top: 60px;

      .swiper {
        width: 100%;
        height: 310px;

        .wrcs-box {
          display: flex;
          align-items: center;
          justify-content: center;

          .wrcsb-words {
            margin-right: 60px;

            .text {
              font-size: 18px;
              line-height: 30px;
              color: #666;

              .yellow {
                color: @color-yellow;
              }
            }

            .author {
              font-size: 18px;
              margin-top: 40px;
              color: #030303;
            }
          }

          .wrcsb-cover {
            width: 400px;
            height: 270px;
            object-fit: cover;
          }
        }
      }

      .swiper-pagination {
        bottom: 0;
      }

      .my-bullet {
        width: 79px;
        height: 4px;
        border-radius: 4px;
        background-color: #ccc;
        display: inline-block;
        opacity: 0.4;
        margin: 0 18px;
        cursor: pointer;
      }

      .my-bullet-active {
        background-color: @color-blue;
        opacity: 1;
      }

      .swiper-button-prev, .swiper-button-next {
        width: 66px;
        height: 66px;
        line-height: 66px;
        border-radius: 50%;
        text-align: center;
        border: 3px solid #000;
        background-color: #fff;
        color: #000;
        transform: translateY(-50%);

        &::after {
          font-size: 36px;
          font-weight: bold;
        }
      }
    }
  }
}

.wzyh-seo {
  padding-top: 100px;

  .ws-center {
    width: 1200px;
    margin: 0 auto;

    .wsc-title {
      font-size: 36px;
      text-align: center;
    }

    .wsc-ul {
      margin-top: 40px;
      margin-left: -20px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .wscu-li {
        float: left;
        margin: 20px 0 0 20px;
        width: 285px;
        height: 270px;
        border: 1px solid #eee;
        box-sizing: border-box;
        background-color: #fff;
        transition: all .3s;

        .cover {
          width: 77px;
          height: 77px;
          border-radius: 50%;
          margin: 31px auto 0;
          overflow: hidden;
          transition: all .3s;

          &.icon1 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/282988054d384e0e8032c500b8f13be5.png) center / 77px no-repeat;
          }

          &.icon2 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/98140a4094604835b1c37a0534d2ea93.png) center / 77px no-repeat;
          }

          &.icon3 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/4998b282c5184d1fa55138b20c4b503d.png) center / 77px no-repeat;
          }

          &.icon4 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/e2ab961d38384fb3940fe0f4e3c253b1.png) center / 77px no-repeat;
          }

          &.icon5 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/4ad9a9d74a3047c3b5ad6967c50268e2.png) center / 77px no-repeat;
          }

          &.icon6 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/e9f577c7458c416280a07a9b3db7d24e.png) center / 77px no-repeat;
          }

          &.icon7 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/01b58b16247e455b804771a9723b0220.png) center / 77px no-repeat;
          }

          &.icon8 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/d20a331b9b484fcc850075eb7a55ac0b.png) center / 77px no-repeat;
          }
        }

        .title {
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          height: 21px;
          line-height: 21px;
          padding: 0 35px;
          margin-top: 23px;
          overflow: hidden;
        }

        .desc {
          text-align: center;
          font-size: 14px;
          color: #999;
          margin-top: 29px;
          line-height: 21px;
          padding: 0 35px;
        }

        &:hover {
          box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);
          border-color: transparent;
          transition: all .3s;

          .cover {
            transform: all .3s;

            &.icon1 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/496c3ae2e35841d799d3f38e17ef9306.png) center / 77px no-repeat;
            }

            &.icon2 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/8ef906122de24240970daddf505720ee.png) center / 77px no-repeat;
            }

            &.icon3 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/9d9798e033be455eb23e58dfa717e4e5.png) center / 77px no-repeat;
            }

            &.icon4 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/c01bcc1168d3485bb6fea66a5bd27b00.png) center / 77px no-repeat;
            }

            &.icon5 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/0ffac6c528154c56bb9ba5ec1609fdbf.png) center / 77px no-repeat;
            }

            &.icon6 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/abd9dc33fd4144e09dfdca179b5d3a9e.png) center / 77px no-repeat;
            }

            &.icon7 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/5eb9aab55aa244b3ba52d8bfbaadaa73.png) center / 77px no-repeat;
            }

            &.icon8 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/cf2392361b644be8bafcd0de6c9abbef.png) center / 77px no-repeat;
            }
          }
        }
      }
    }
  }
}

.wzyh-reason {
  padding-top: 134px;

  .wr-center {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 80px;

    .wrc-title {
      font-size: 36px;
      text-align: center;
    }

    .wrc-ul {
      margin-top: 59px;
      display: flex;
      justify-content: space-between;

      .wrcu-li {
        width: 384px;
        height: 384px;
        background-color: #fff;
        box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);
        transition: all .3s;

        .cover {
          width: 100%;
          height: 255px;
          object-fit: cover;
          overflow: hidden;
        }

        .content {
          height: 128px;
          text-align: center;

          .num {
            font-weight: bold;
            font-size: 20px;
            margin-top: 23px;
          }

          .text {
            font-size: 16px;
            color: #666;
            margin-top: 16px;
          }
        }

        &:hover {
          transition: all .3s;
          transform: translateY(-21px);
        }
      }
    }
  }
}

/* 竞价托管 */
.jjtg-advantage {
  padding-top: 59px;

  .ja-center {
    width: 1200px;
    margin: 0 auto;

    .jac-title {
      font-size: 18px;
    }

    .jac-label {
      margin-top: 15px;
      color: #999;
      font-size: 14px;
    }

    .jac-ul {
      margin-top: 10px;
      margin-left: -30px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .jacu-li {
        margin: 30px 0 0 30px;
        float: left;
        width: 380px;
        height: 134px;
        display: flex;
        align-items: center;

        &.bg1 {
          background: @color-yellow url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/d8590b50ddcb4ee2af8bb915ab138df8.png) calc(100% - 10px) calc(100% - 10px) / 61px no-repeat;
        }

        &.bg2 {
          background: @color-blue url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/78bb3ba5db574e7cb45ca6c26fbb6aca.png) calc(100% - 10px) calc(100% - 10px) / 61px no-repeat;
        }

        &.bg3 {
          background: #FD7D5A url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/c501a34887fe49a3abb634b9867e9888.png) calc(100% - 10px) calc(100% - 10px) / 61px no-repeat;
        }

        &.bg4 {
          background: #50CEFE url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/1c89845b41b946fc9385f3605c03b600.png) calc(100% - 10px) calc(100% - 10px) / 61px no-repeat;
        }

        &.bg5 {
          background: #C46CFB url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/f8bc612032ea480c99d33ee9682fd514.png) calc(100% - 10px) calc(100% - 10px) / 61px no-repeat;
        }

        &.bg6 {
          background: #26CFA6 url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/b61db59d07cd49e5a9fba6544a925968.png) calc(100% - 10px) calc(100% - 10px) / 61px no-repeat;
        }

        .char {
          color: #fff;
          font-size: 80px;
          font-weight: bold;
          font-style: italic;
          width: 138px;
          height: 134px;
          line-height: 134px;
          text-align: center;
          position: relative;

          &::after {
            content: '';
            width: 2px;
            background-color: #fff;
            position: absolute;
            top: 22px;
            left: 100%;
            bottom: 22px;
          }
        }

        .items {
          flex: 1;
          padding: 22px 0;
          overflow: hidden;

          p {
            padding: 0 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #fff;
            font-size: 18px;

            &:nth-child(2) {
              margin-top: 28px;
            }
          }
        }
      }
    }
  }
}

.jjtg-solve {
  padding-top: 119px;

  .js-title {
    font-size: 36px;
    text-align: center;
    color: #262933;
  }

  .js-bg {
    background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/8b06eabfe7e64f299e458076138a0889.jpg) center / cover no-repeat;
    margin-top: 40px;
    padding-bottom: 40px;

    .jsb-center {
      width: 1200px;
      margin: 0 auto;
      padding-top: 19px;

      .jsbc-notice {
        color: #fff;
        text-align: center;
        font-size: 18px;

        .yellow {
          color: @color-yellow;
        }
      }

      .jsb-ul {
        margin-top: 25px;
        margin-left: -15px;

        &::after {
          content: '';
          clear: both;
          display: block;
        }
        
        .jsbu-li {
          float: left;
          margin: 15px 0 0 15px;
          width: 390px;
          height: 212px;
          box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);

          .title {
            font-size: 18px;
            font-weight: bold;
            padding: 40px 20px 0;
          }

          .sub-title {
            font-size: 14px;
            margin-top: 5px;
            padding: 0 20px;
          }

          .desc {
            margin-top: 29px;
            font-size: 14px;
            color: #666;
            line-height: 24px;
            padding: 0 62px 0 20px;
          }

          &.bg1 {
            background: #fff url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/0b4bde05db374d04bd2ac7cbd7bbc7e8.png) right bottom / 101px no-repeat;

            .title, .sub-title {
              color: #26CFA6;
            }
          }

          &.bg2 {
            background: #fff url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/ac2a09b38bcf41bab7ef0a14e1aa7e58.png) right bottom / 89px no-repeat;

            .title, .sub-title {
              color: @color-yellow;
            }
          }

          &.bg3 {
            background: #fff url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/94231f49e68645c98490b73056f0525c.png) right bottom / 98px no-repeat;

            .title, .sub-title {
              color: #FD7D5A;
            }
          }

          &.bg4 {
            background: #fff url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/bb179b4b89164e6c8a0e903e178b346b.png) right bottom / 102px no-repeat;

            .title, .sub-title {
              color: #50CEFE;
            }
          }

          &.bg5 {
            background: #fff url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/027efe5009044f50a20b3b739f098da8.png) right bottom / 100px no-repeat;

            .title, .sub-title {
              color: @color-blue;
            }
          }

          &.bg6 {
            background: #fff url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221105/9d659761c931423c8a8c1037193ee7c2.png) right bottom / 100px no-repeat;

            .title, .sub-title {
              color: #26CFA6;
            }
          }
        }
      }
    }
  }
}

.jjtg-doubt {
  padding-top: 92px;

  .jd-center {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 120px;

    .jdc-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .jdc-desc {
      margin-top: 38px;
      text-align: center;
      font-size: 18px;
      color: #262933;
    }

    .jdc-item1 {
      margin-top: 34px;
      display: flex;

      .i-cover {
        position: relative;
        margin-right: 120px;
        padding: 25px 58px 46px 0;
        background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221107/c339e89626924b0595d97af8e80bf156.png) right top / 513px no-repeat;

        .img {
          width: 476px;
          height: 342px;
          object-fit: cover;
          overflow: hidden;
        }
      }

      .i-item {
        flex: 1;
        overflow: hidden;

        .ii-title {
          margin-top: 35px;
          font-size: 30px;
          color: @color-blue;
          overflow: hidden;
          white-space: nowrap;
        }

        .ii-desc {
          font-size: 18px;
          margin: 20px 0 31px 0;
          color: #666;
          overflow: hidden;
          white-space: nowrap;
        }

        .ii-step {
          display: flex;
          align-items: center;
          margin-bottom: 40px;

          &:last-child {
            margin-bottom: 0;
          }

          .num {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            text-align: center;
            font-size: 24px;
            color: #fff;
            font-family: ZhenyanGB;
            font-weight: bold;
            margin-right: 12px;
            background-color: @color-blue;
            overflow: hidden;
          }

          .text {
            flex: 1;
            font-size: 16px;
            overflow: hidden;
          }
        }
      }
    }

    .jdc-item2 {
      margin-top: 50px;
      display: flex;
      justify-content: flex-end;

      .i-item {
        // flex: 1;
        margin-right: 120px;
        overflow: hidden;

        .ii-title {
          margin-top: 35px;
          font-size: 30px;
          color: @color-blue;
          overflow: hidden;
          white-space: nowrap;
        }

        .ii-desc {
          font-size: 18px;
          margin: 20px 0 31px 0;
          color: #666;
          overflow: hidden;
          white-space: nowrap;
        }

        .ii-step {
          display: flex;
          align-items: center;
          margin-bottom: 40px;

          &:last-child {
            margin-bottom: 0;
          }

          .num {
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            text-align: center;
            font-size: 24px;
            color: #fff;
            font-family: ZhenyanGB;
            font-weight: bold;
            margin-right: 12px;
            background-color: @color-blue;
            overflow: hidden;
          }

          .text {
            flex: 1;
            font-size: 16px;
            overflow: hidden;
          }
        }
      }

      .i-cover {
        position: relative;
        padding: 25px 0 46px 58px;
        background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221107/96a086510ecd463baf647fec50d16df8.png) right top / 513px no-repeat;

        .img {
          width: 476px;
          height: 342px;
          object-fit: cover;
          overflow: hidden;
        }
      }
    }
  }
}

/* 抖音运营 */
.dyyy-layout {
  padding-top: 60px;

  .dl-ul {
    width: 1200px;
    margin: 0 auto;

    .dlu-li {
      display: flex;
      align-items: center;

      .li-cover {
        margin-right: 54px;
      }

      .li-item {
        flex: 1;
        overflow: hidden;

        .title {
          font-size: 36px;
        }

        .desc {
          margin-top: 20px;
          font-size: 18px;
          color: #666;
        }
      }

      &.li2 {
        margin-top: 120px;

        .li-cover {
          margin-right: 0;
        }

        .mr170 {
          margin-right: 170px;
        }

        .li-item {

          .title {
            width: 300px;
            text-align: center;
          }
  
          .line {
            margin-top: 39px;
            position: relative;
            width: 300px;
            height: 2px;
            background: #F2F2F2;
  
            &::after {
              content: '';
              width: 200px;
              height: 4px;
              border-radius: 4px;
              background-color: @color-blue;
              position: absolute;
              left: 50%;
              bottom: 0;
              transform: translateX(-50%);
            }
          }

          .service-btn {
            width: 199px;
            height: 46px;
            border-radius: 46px;
            border: 0;
            background-color: @color-blue;
            color: #fff;
            font-size: 18px;
            text-align: center;
            margin-top: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .icon {
              width: 30px;
              height: 6px;
              margin-left: 10px;
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221108/e82b72b53bc64790b0a9da8bbe38544b.png) center / auto 6px no-repeat;
            }
          }
        }
      }
    }
  }
}

.dyyy-launch {
  padding-top: 60px;

  .dl-center {
    width: 1200px;
    margin: 0 auto;

    .dlc-title {
      font-size: 36px;
      text-align: center;
      color: #353535;
    }

    .dlc-ul {
      margin-top: 123px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .dlcu-li {
        float: left;
        display: flex;
        align-items: center;
        position: relative;

        .num {
          width: 118px;
          height: 118px;
          line-height: 118px;
          border-radius: 118px;
          text-align: center;
          background-color: @color-blue;
          color: #fff;
          font-weight: bold;
          font-size: 45px;
          margin-right: 20px;
          position: relative;
          z-index: 1;
        }

        .item {
          flex: 1;
          overflow: hidden;

          .title {
            font-size: 18px;
            font-weight: bold;
            overflow: hidden;
          }

          .desc {
            margin-top: 19px;
            font-size: 14px;
            color: #666;
          }
        }

        &.li1 {
          width: 400px;

          .line {
            width: 150px;
            height: 0;
            border-bottom: 1px dashed @color-blue;
            position: absolute;
            bottom: -29px;
            left: 58px;
            transform: rotate(50deg);

            &::after {
              content: '';
              width: 0;
              height: 0;
              border-width: 10px 5px 0 5px;
              border-style: solid;
              border-color: @color-blue transparent transparent transparent;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) rotate(-90deg);
            }
          }
        }

        &.li2 {
          margin-top: 48px;
          margin-left: 142px;
          width: 537px;

          .line {
            width: 235px;
            height: 0;
            border-bottom: 1px dashed @color-blue;
            position: absolute;
            top: -29px;
            left: 58px;
            transform: rotate(-32deg);

            &::after {
              content: '';
              width: 0;
              height: 0;
              border-width: 10px 5px 0 5px;
              border-style: solid;
              border-color: @color-blue transparent transparent transparent;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) rotate(-90deg);
            }
          }
        }

        &.li3 {
          width: 452px;

          .line {
            width: 254px;
            height: 0;
            border-bottom: 1px dashed @color-blue;
            position: absolute;
            bottom: -26px;
            left: 72px;
            transform: rotate(36deg);

            &::after {
              content: '';
              width: 0;
              height: 0;
              border-width: 10px 5px 0 5px;
              border-style: solid;
              border-color: @color-blue transparent transparent transparent;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) rotate(-90deg);
            }
          }
        }

        &.li4 {
          margin-top: 48px;

          .line {
            width: 172px;
            height: 0;
            border-bottom: 1px dashed @color-blue;
            position: absolute;
            top: -15px;
            left: 70px;
            transform: rotate(-50deg);

            &::after {
              content: '';
              width: 0;
              height: 0;
              border-width: 10px 5px 0 5px;
              border-style: solid;
              border-color: @color-blue transparent transparent transparent;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) rotate(-90deg);
            }
          }
        }
      }
    }
  }
}

.dyyy-toshow {
  padding-top: 119px;

  .dt-center {
    width: 1200px;
    margin: 0 auto;

    .dtc-title {
      font-size: 36px;
      text-align: center;
      color: #353535;
    }

    .dtc-box {
      margin-top: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .b-ul {
        margin-right: 169px;

        &::after {
          content: '';
          clear: both;
          display: block;
        }

        .bu-li {
          float: left;
          width: 210px;
          height: 306px;
          margin-right: 30px;
          background-color: #fff;
          box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);

          &.mt168 {
            margin-top: 168px;
          }

          &.mt-138 {
            margin-top: -138px;
          }

          .bul-tips {
            margin-top: 30px;
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;

            .round {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              border: 1px solid @color-blue;
              margin-right: 3px;
            }
            
            .text {
              font-size: 16px;
              color: @color-blue;
              line-height: 18px;
            }
          }

          .bul-title {
            margin: 0 10px;
            padding: 19px 0;
            height: 127px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #F2F2F2;
            border-bottom: 1px solid #F2F2F2;

            .text {
              width: 100%;
              text-align: center;
              color: @color-yellow;
              font-size: 18px;
            }

            .desc {
              font-size: 14px;
              padding: 0 11px;
              text-align: center;

              .yellow {
                color: @color-yellow;
              }
            }
          }

          .bul-desc {
            margin: 20px 21px;
            font-size: 14px;
          }
        }
      }

      .b-cover {
        width: 517px;
      }
    }
  }
}

.dyyy-ad {
  padding-top: 106px;
  
  .da-center {
    width: 1200px;
    margin: 0 auto;

    .dac-title {
      font-size: 36px;
      text-align: center;
    }

    .dac-desc {
      font-size: 18px;
      text-align: center;
      margin-top: 40px;
    }

    .dac-list {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-top: 80px;

      .dacl-dl {
        width: 207px;

        .dacld-dt {
          font-size: 67px;
          font-family: Source Han Sans CN;
          text-align: center;
          line-height: 34px;
        }

        .dacld-dd {
          margin-top: -16px;
          height: 392px;
          position: relative;

          .triangle-up {
            width: 0;
            height: 0;
            border-width: 0 103px 60px 103px;
            border-style: solid;
            border-color: transparent transparent #F3F9FD transparent;
            position: absolute;
            top: 0;
            left: 0;
          }

          .triangle-down {
            width: 0;
            height: 0;
            border-width: 60px 103px 0 103px;
            border-style: solid;
            border-color:  #F3F9FD transparent transparent transparent;
            position: absolute;
            bottom: 0;
            left: 0;
          }

          .bg {
            background-color: #F3F9FD;
            position: absolute;
            top: 60px;
            right: 0;
            bottom: 60px;
            left: 0;
          }

          .content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1;
            padding: 15px;
            overflow: hidden;

            .c-title {
              width: 180px;
              height: 201px;
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221109/a7578b4e2c38425eb50ac267fdce6509.png) center / 180px no-repeat;
              box-sizing: border-box;
              font-size: 18px;
              font-weight: bold;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .c-desc {
              margin-top: 29px;
              text-align: center;
              font-size: 16px;
              color: #666;
            }
          }
        }
      }
    }
  }
}

.dyyy-flow {
  padding: 120px 0;

  .df-title {
    font-size: 36px;
    text-align: center;
  }

  .df-bg {
    margin-top: 40px;
    background-color: @color-blue;

    .dfb-center {
      width: 1200px;
      margin: 0 auto;
      height: 922px;
      display: flex;
      align-items: center;
      justify-content: center;

      .dfbc-box {
        width: 641px;
        height: 641px;
        border-radius: 50%;
        box-sizing: border-box;
        position: relative;
        border: 2px solid #fff;
        box-shadow: inset 0 0 0 85px rgba(255,255,255,.02);
        display: flex;
        align-items: center;
        justify-content: center;

        .b-center {
          width: 314px;
          height: 314px;
          border-radius: 50%;
          display:grid;
          align-content: center;
          background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221109/12dd8e0b01c04cbcb0caee0f66a9c2e2.jpg) center / 314px no-repeat;

          .bc-title {
            color: #fff;
            font-size: 36px;
            text-align: center;
            font-weight: bold;
            width: 100%;
          }

          .bc-desc {
            color: #fff;
            font-size: 18px;
            margin-top: 10px;
            width: 100%;
            text-align: center;
          }
        }

        .dfbc-flow {
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;

          .item {
            flex: 1;
            margin-right: 12px;
            text-align: right;
            overflow: hidden;

            .i-title {
              color: #fff;
              font-size: 24px;
              font-weight: bold;
              white-space: nowrap;
            }
            
            .i-desc {
              color: #fff;
              font-size: 18px;
              margin-top: 8px;
              white-space: nowrap;
            }
          }

          .num {
            width: 80px;
            height: 80px;
            line-height: 80px;
            border-radius: 80px;
            text-align: center;
            background: linear-gradient(45deg, #E53E55 0%, #EF5B47 100%);
            color: #fff;
            font-size: 36px;
          }

          &.flow1 {
            left: unset;
            right: 100%;
            top: 25%;
            transform: translate(120px, -100px);
          }

          &.flow2 {
            left: 50%;
            top: unset;
            bottom: 100%;
            transform: translate(-50%, 40px);
            display: block;

            .num {
              margin: 10px auto 0;
              background: linear-gradient(45deg, #3EAFFF 0%, #1D7BEA 100%);
            }

            .item {
              margin: 0;
              text-align: center;
            }
          }

          &.flow3 {
            left: 100%;
            top: 25%;
            transform: translate(-120px, -100px);

            .num {
              background: linear-gradient(45deg, #2AE0F0 0%, #30A0F1 100%);
            }

            .item {
              margin-right: 0;
              margin-left: 12px;
              text-align: left;
            }
          }

          &.flow4 {
            left: 100%;
            top: 50%;
            transform: translate(-40px, -50%);

            .num {
              background: linear-gradient(45deg, #4FEDAD 0%, #5CF3B4 100%);
            }

            .item {
              margin-right: 0;
              margin-left: 12px;
              text-align: left;
            }
          }

          &.flow5 {
            top: unset;
            left: 100%;
            bottom: 25%;
            transform: translate(-120px, 100px);

            .num {
              background: linear-gradient(45deg, #EE3E4E 0%, #F26447 100%);
            }

            .item {
              margin-right: 0;
              margin-left: 12px;
              text-align: left;
            }
          }

          &.flow6 {
            top: 100%;
            left: 50%;
            transform: translate(-50%, -40px);
            display: block;

            .num {
              background: linear-gradient(45deg, #3EAFFF 0%, #45DEFF 100%);
              margin: 0 auto 10px;
            }

            .item {
              margin: 0;
              text-align: center;
            }
          }

          &.flow7 {
            top: unset;
            left: unset;
            bottom: 25%;
            right: 100%;
            transform: translate(120px, 100px);

            .num {
              background: linear-gradient(45deg, #F067FF 0%, #FA6FFA 100%);
            }
          }

          &.flow8 {
            top: 50%;
            left: unset;
            right: 100%;
            transform: translate(40px, -50%);

            .num {
              background: linear-gradient(45deg, #72DF63 0%, #95EF95 100%);
            }

            .item {
              text-align: right;
            }
          }
        }
      }
    }
  }
}

.khal-title {
  margin-top: 40px;
  text-align: center;

  .title {
    display: inline-block;
    width: 200px;
    padding-bottom: 10px;
    font-size: 36px;
    font-weight: 400;
    border-bottom: 1px solid #ccc;
  }
}

.khal-crumb {
  padding-top: 10px;
  
  .kc-center {
    width: 1200px;
    margin: 0 auto;

    .kcc-list {
      
      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .kccl-a {
        float: left;
        font-size: 14px;
        position: relative;

        &:hover {
          text-decoration: underline;
        }

        &::after {
          content: '>';
          margin: 0 5px;
          float: right;
        }

        &.noafter {
          color: #666;
          cursor: default;
          
          &::after {
            content: unset;
          }

          &:hover {
            text-decoration: none;
          }
        }
      }
    }
  }
}

.khal-screen {
  padding-top: 20px;

  .ks-center {
    width: 1200px;
    margin: 0 auto;

    .ksc-city {
      display: flex;
      align-items: center;
      background-color: #fff;

      .c-cover {
        width: 120px;
        min-height: 98px;
        background: @color-blue url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/73a7c972c0d7408f911a310e899a9ec3.jpg) center / 34px no-repeat;
      }

      .c-list {
        flex: 1;
        margin-left: 20px;
        padding: 10px 0; 
        overflow: hidden;

        .cl-a {
          float: left;
          height: 24px;
          line-height: 24px;
          padding: 0 8px;
          font-size: 14px;
          transition: all .3s;

          &:hover {
            color: @color-blue;
            transition: all .3s;
          }

          &.on {
            background-color: @color-blue;
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }

    .ksc-type {
      margin-top: 20px;
      background-color: #fff;
      
      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .kt-list {
        float: left;
        width: 200px;
        height: 60px;
        line-height: 60px;
        text-align: center;

        .ktl-a {
          font-size: 16px;
          transition: all .3s;
  
          &:hover {
            color: @color-blue;
            transition: all .3s;
          }
        }
  
        &.on {
          background-color: @color-blue;

          .ktl-a {
            color: #fff;
            font-weight: bold;
          }
        }
      }
    }
  }
}

.khal-list {
  padding-top: 40px;

  .kl-center {
    width: 1200px;
    margin: 0 auto;

    &::after {
      content: '';
      clear: both;
      display: block;
    }

    .klc-left {
      float: left;
      width: 900px;

      .klc-ul {
        margin-left: -24px;
  
        &::after {
          content: '';
          clear: both;
          display: block;
        }
        
        .klcu-li {
          float: left;
          margin: 0 0 24px 24px;
          width: 284px;
          background-color: #fff;
          box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);
          box-sizing: border-box;
  
          .cover {
            display: block;
            width: 100%;
            height: 200px;
            overflow: hidden;
  
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: all .3s;
            }
          }
  
          .title {
            display: block;
            height: 75px;
            line-height: 75px;
            padding: 0 20px;
            text-align: center;
            font-size: 16px;
            color: #666;
            transition: all .3s;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
  
          &:hover .cover img {
            transform: scale(1.1);
            transition: all .3s;
          }
  
          &:hover .title {
            color: @color-blue;
            transition: all .3s;
          }
        }
      }
  
      .page {
        margin: 120px 0;
        text-align: center;
      }
    }

    .klc-right {
      float: left;
      margin-left: 24px;
      width: 276px;

      .relevant-news {
        background-color: #fff;
        margin-bottom: 24px;
        box-shadow: 0px 0px 21px 0px rgb(0 0 0 / 9%);

        .rn-title {
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          border-bottom: 1px solid #e6e6e6;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            width: 21px;
            height: 21px;
            background: url(/images/icon-book.png) center / 21px no-repeat;
            margin-right: 6px;
          }

          .text {
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .rn-ul {
          padding: 10px 20px 20px 20px;

          .rnu-li {
            margin-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .rnul-a {
              font-size: 14px;
              transition: all .3s;

              &:hover {
                color: @color-blue;
                transition: all .3s;
              }
            }
          }
        }
      }

      .r-label {
        background-color: #fff;
        margin-bottom: 24px;
        padding: 19px;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        box-shadow: 0px 0px 21px 0px rgb(0 0 0 / 9%);

        .rl-a {
          flex: calc(50% - 2px);
          margin: 1px;
          height: 35px;
          line-height: 35px;
          border-radius: 2px;
          background-color: #e6e6e6;
          font-size: 14px;
          text-align: center;
          padding: 0 10px;
          box-sizing: border-box;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          transition: all .3s;

          &:hover {
            transition: all .3s;
            opacity: .8;
          }
        }
      }

      .r-contact {
        background-color: #fff;
        padding-bottom: 30px;
        box-shadow: 0px 0px 21px 0px rgb(0 0 0 / 9%);

        .rc-title {
          padding-top: 30px;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            width: 22px;
            height: 22px;
            margin-right: 6px;
            background: url(/images/icon-phone2.png) center / 22px no-repeat;
          }

          .text {
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .rc-phone {
          margin-top: 27px;
          font-size: 14px;
          text-align: center;
        }

        .rc-address {
          margin-top: 20px;
          font-size: 14px;
          text-align: center;
        }
      }
    }
  }
}

.khalxq-content {
  padding-top: 58px;
  min-height: calc(100vh - 603px);

  .kc-center {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;

    .kcc-left {
      flex: 1;
      margin-right: 20px;
      overflow: hidden;

      .kcc-title {
        font-size: 24px;
        font-family: Adobe Heiti Std;
        margin-bottom: 30px;
      }
   
      .kcc-content {
        margin-bottom: 20px;

        img {
          max-width: 100%;
        }
      }
    }

    .kcc-right {
      width: 290px;

      .r-type {
        background-color: #fff;
        padding-top: 20px;

        &.mt20 {
          margin-top: 20px;
        }

        .rt-title {
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            width: 21px;
            height: 21px;
            background: url(/images/icon-book.png) center / 21px no-repeat;
            margin-right: 6px;
          }

          .text {
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .rt-ul {
          margin-top: 28px;
          padding: 0 20px 20px 20px;

          .rtu-li {
            border: 1px solid #f0f0f0;
            height: 34px;
            line-height: 34px;
            padding: 0 20px;
            box-sizing: border-box;
            margin-bottom: 10px;
            transition: all .3s;

            a {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .text {
                font-size: 14px;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: all .3s;
              }
              
              .icon {
                width: 8px;
                font-size: 14px;
                font-family: Arial;
                font-style: normal;
                transition: all .3s;
              }
            }

            &:hover {
              background-color: @color-blue;
              border-color: @color-blue;
              transition: all .3s;

              .text, .icon {
                color: #fff;
              }
            }
          }
        }

        .rt-list {
          margin-top: 19px;
          padding: 0 19px 20px 19px;


          &::after {
            content: '';
            clear: both;
            display: block;
          }

          .rtl-a {
            float: left;
            padding: 0 10px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            margin: 0.5px;
            transition: all .3s;

            &:hover {
              color: @color-blue;
              transition: all .3s;
            }
          }
        }

        .rt-form {
          padding: 10px 20px 30px 20px;

          .f-input {
            margin-top: 10px;
            border: 1px solid #e6e6e6;
            width: 100%;
            height: 38px;
            line-height: 38px;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 14px;
          }

          .f-textarea {
            resize: none;
            border: 1px solid #e6e6e6;
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            line-height: 24px;
            margin-top: 10px;
            font-size: 14px;
            min-height: 120px;
          }

          .f-save {
            margin-top: 10px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: @color-blue;
            border: 1px solid @color-blue;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;

            &:hover {
              transition: all .3s;
              opacity: .8;
            }
          }
        }
      }
    }
  }
}

.khalxq-relevant {
  padding: 50px 0 70px;

  .kr-center {
    width: 1200px;
    margin: 0 auto;

    .krc-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .text {
        font-size: 22px;
        display: flex;
        align-items: center;
  
        &::before {
          content: '';
          width: 21px;
          height: 21px;
          background: url(/images/icon-book.png) center / 21px no-repeat;
          margin-right: 6px;
        }
      }

      .more {
        font-size: 12px;
        color: #999;
      }
    }
  
    .krc-ul {
      margin-left: -20px;
      overflow: hidden;
  
      .krcu-li {
        width: calc(100% / 3 - 20px);
        float: left;
        margin: 20px 0 0 20px;
        display: flex;
        align-items: flex-start;
  
        .cover {
          width: 180px;
          height: 90px;
          margin-right: 20px;
          display: block;
          overflow: hidden;
  
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all .3s;
          }
  
          &:hover img {
            transform: scale(1.1);
            transition: all .3s;
          }
        }
  
        .item {
          flex: 1;
          overflow: hidden;
  
          .i-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
  
            a {
              transition: all .3s;
              font-size: 16px;

              &:hover {
                color: @color-blue;
                transition: all .3s;
              }
            }
          }

          .i-desc {
            margin-top: 10px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;

            a {
              font-size: 14px;
              color: #999;
            }
          }
        }
      }
    }
  }
}

/* 联系我们 */
.lxwm-form {
  padding: 80px 0;
  background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/87e775f9b4c54f739394a361a12a37c6.jpg) center / cover no-repeat;

  .lf-center {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;

    .lfc-info {
      flex: 1;
      overflow: hidden;

      .title {
        color: #fff;
        font-size: 32px;
      }

      .phone {
        color: #fff;
        font-size: 18px;
        margin-top: 20px;
      }

      .address {
        color: #fff;
        font-size: 18px;
        margin-top: 18px;
      }
    }

    .lfc-form {
      width: 894px;
      background-color: #fff;
      padding: 39px 0 39px 40px;
      box-sizing: border-box;

      .tips {
        font-size: 18px;
        font-weight: bold;
      }

      .form-box {
        margin-top: 24px;
        margin-left: -20px;

        &::after {
          content: '';
          clear: both;
          display: block;
        }
        
        .input {
          float: left;
          margin: 0 0 20px 20px;
          width: 377px;
          height: 50px;
          border: 1px solid #ccc;
          box-sizing: border-box;
          padding: 0 20px;
          font-size: 14px;

          &.phone-input {
            width: 257px;
            margin-bottom: 0;
          }
        }

        .select {
          float: left;
          margin: 0 0 20px 20px;
          width: 377px;
          height: 50px;
          border: 1px solid #ccc;
          box-sizing: border-box;
          padding: 0 20px;
          font-size: 14px;
        }

        .textarea {
          float: left;
          margin-left: 20px;
          width: 497px;
          height: 150px;
          padding: 20px;
          border: 1px solid #ccc;
          box-sizing: border-box;
          font-size: 14px;
          resize: none;
        }

        .form-save {
          float: right;
          width: 257px;
          height: 50px;
          line-height: 50px;
          border-radius: 2px;
          text-align: center;
          padding: 0;
          border: 1px solid @color-blue;
          color: @color-blue;
          font-size: 18px;
          font-weight: bold;
          background-color: @color-blue;
          color: #fff;
          margin: 50px 80px 0 0;
          cursor: pointer;
          transition: all .3s;

          &:hover {
            opacity: .8;
            transition: all .3s;
          }
        }
      }
    }
  }
}

.lxwm-map {
  width: 1200px;
  height: 350px;
  margin: 120px auto 0;
}

.lxwm-mode {
  padding: 60px 0 120px;

  .lm-center {
    width: 1200px;
    margin: 0 auto;

    .lmc-ul {
      margin-left: -24px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .lmcu-li {
        float: left;
        margin-left: 24px;
        background-color: #fff;
        box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);
        width: 282px;
        height: 290px;

        .cover {
          width: 140px;
          height: 140px;
          border-radius: 50%;
          border: 1px solid @color-blue;
          box-sizing: border-box;
          margin: 40px auto 0;

          &.icon1 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/0d16c08d1e174b39ac4848cf3a1191e1.jpg) center / 56px no-repeat;
          }

          &.icon2 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/7d0ee91959e149418af9bf8d9d2f9281.jpg) center / 54px no-repeat;
          }

          &.icon3 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/2ff6f3a0a21d4a44a3e86243c9cac75c.jpg) center / 64px no-repeat;
          }

          &.icon4 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221110/6c7e2244323a424597820fbf89ce413f.jpg) center / 42px no-repeat;
          }
        }

        .title {
          margin-top: 37px;
          text-align: center;
          font-size: 16px;
          overflow: hidden;
          white-space: nowrap;
        }

        .desc {
          font-size: 14px;
          text-align: center;
          color: #666;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
}

/* 企业网站建设 */
.qywzjs-crumb {
  padding-top: 30px;
}

.qywzjs-build {
  padding-top: 99px;

  .qb-center {
    width: 1200px;
    margin: 0 auto;

    .qbc-title {
      font-size: 36px;
      text-align: center;
    }

    .qbc-desc {
      margin-top: 21px;
      text-align: center;
      font-size: 18px;
    }

    .qbc-ul {
      margin-top: 65px;
      display: flex;
      justify-content: space-between;

      .qbcu-li {
        text-align: center;

        .cover {
          height: 105px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .title {
          margin-top: 20px;
          font-size: 18px;
        }

        .desc {
          font-size: 14px;
          color: #999;
          margin-top: 20px;
        }
      }
    }
  }
}

.qywzjs-advantage {
  padding-top: 120px;

  .qa-center {
    width: 1200px;
    margin: 0 auto;

    .qac-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .qac-desc {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    
      .before {
        font-size: 18px;
        color: #666;
        margin-right: 19px;
      }
    
      .after {
        font-size: 14px;
        color: #666;
      }
    }

    .qac-box {
      width: 100%;
      margin-top: 54px;
      display: flex;
      align-items: center;
      justify-content: center;

      .b-cover {
        width: 337px;
        height: 289px;
        margin-right: 182px;
      }

      .b-item {
        overflow: hidden;

        .bi-dl {
          display: flex;
          align-items: center;
          margin-bottom: 20px;

          &:last-child {
            margin-bottom: 0;
          }

          .bid-icon {
            width: 24px;
            height: 24px;
            margin-right: 10px;
            background: url(/images/icon-check.png) center / 24px no-repeat;
          }

          .bid-text {
            font-size: 14px;
            color: #262933;
          }
        }
      }
    }
  }
}

.qywzjs-system {
  padding-top: 57px;

  .qs-center {
    width: 1200px;
    margin: 0 auto;

    .qsc-title {
      font-size: 36px;
      text-align: center;
      font-size: #262933;
    }

    .qsc-desc {
      font-size: 18px;
      margin-top: 21px;
      text-align: center;
    }

    .qsc-ul {
      margin-top: 117px;
      background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221111/e1a2d9fbeb9c4a59b5965f07eb26ba06.jpg) center / 614px no-repeat;

      .qscu-li {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        margin-bottom: 40px;

        .l-box {
          position: relative;

          .cover {
            width: 80px;
            height: 80px;
            display: block;
            margin: 0 auto;
          }

          .title {
            text-align: center;
            font-size: 24px;
            margin-top: 19px;
          }

          .desc {
            font-size: 14px;
            margin-top: 9px;
          }

          .arrow {
            width: 70px;
            height: 36px;
            background: url(/images/icon-arrow.png) center / 70px no-repeat;
            position: absolute;

            &.arrow1 {
              top: 37px;
              right: 0;
            }

            &.arrow2 {
              top: 72px;
              right: 100%;
              transform: rotateY(180deg);
            }

            &.arrow3 {
              top: 43px;
              right: 0;
              transform: rotateX(180deg) rotate(318deg);
            }

            &.arrow4 {
              top: 79px;
              right: 100%;
              transform: rotateX(180deg) rotateY(180deg) rotate(318deg);
            }

            &.arrow5 {
              top: 60px;
              right: -35px;
              transform: rotateX(180deg) rotate(358deg);
            }

            &.arrow6 {
              top: 96px;
              right: 100%;
              transform: rotateX(180deg) rotateY(180deg) rotate(20deg);
            }
          }
        }
      }
    }
  }
}

/* 营销型网站 */
.yxxwzzz-top {
  padding-top: 90px;

  .yt-center {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    .ytc-cover {
      width: 343px;
      margin-right: 100px;
    }

    .ytc-right {
      overflow: hidden;

      .r-desc {
        font-size: 14px;
        text-align: right;
      }

      .r-title {
        margin-top: 20px;
        font-size: 24px;
        color: #262933;
        text-align: right;
        font-weight: bold;
        line-height: 30px;

        .yellow {
          color: @color-yellow;
        }
      }

      .r-title-en {
        font-size: 14px;
        text-align: right;
        margin-top: 9px;
        color: #999;
      }

      .r-notice {
        margin-top: 29px;
        width: 368px;
        height: 46px;
        line-height: 46px;
        border-radius: 46px;
        text-align: center;
        background: linear-gradient(90deg, #00A5FF, #007EFF);
        color: #fff;
        font-size: 18px;
        float: right;
      }
    }
  }
}

.yxxwzzz-plan {
  padding-top: 120px;

  .yp-center {
    width: 1200px;
    margin: 0 auto;

    .ypc-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .ypc-desc {
      margin-top: 21px;
      text-align: center;
      font-size: 18px;
    }

    .ypc-ul {
      margin-top: 80px;
      display: flex;
      align-items: stretch;
      justify-content: space-between;

      .ypcu-li {
        overflow: hidden;

        .cover {
          width: 92px;
          height: 102px;
          display: block;
          margin: 0 auto;
        }

        .title {
          margin-top: 20px;
          text-align: center;

          .ch {
            font-size: 18px;
          }

          .en {
            margin-top: 7px;
            font-size: 12px;
            color: #999;
          }

          .line {
            width: 14px;
            height: 2px;
            display: block;
            background-color: @color-blue;
            margin: 4px auto 0;
          }
        }

        .desc {
          text-align: center;
          font-size: 14px;
          color: #666;
          margin-top: 10px;
        }
      }
    }
  }
}

.yxxwzzz-service {
  padding-top: 120px;

  .ys-center {
    width: 1200px;
    margin: 0 auto;

    .ysc-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .ysc-desc {
      margin-top: 21px;
      text-align: center;
      font-size: 18px;
    }

    .ysc-ul {
      margin-top: 80px;
      display: flex;
      justify-content: space-between;

      .yscu-li {
        width: 360px;
        box-sizing: border-box;

        .l-title {
          height: 47px;
          line-height: 47px;
          text-align: center;
          font-size: 24px;
          color: #fff;
        }

        .l-content {
          height: 351px;
          border: 1px solid #E5E5E5;
          border-top: 0;

          .cover {
            height: 236px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .desc {
            font-size: 14px;
            color: #666;
            text-align: center;
          }
        }

        &.li1 .l-title {
          background-color: @color-blue;
        }

        &.li1 .l-content {
          border-bottom: 2px solid @color-blue;
        }

        &.li2 .l-title {
          background-color: @color-yellow;
        }

        &.li2 .l-content {
          border-bottom: 2px solid @color-yellow;
        }

        &.li3 .l-title {
          background-color: @color-red;
        }

        &.li3 .l-content {
          border-bottom: 2px solid @color-red;
        }
      }
    }
  }
}

.yxxwzzz-give {
  padding: 120px 0;

  .yg-center {
    width: 1200px;
    margin: 0 auto;

    .ygc-title {
      font-size: 36px;
      text-align: center;
      color: #262933;

      .red {
        color: @color-red;
      }
    }

    .ygc-desc {
      margin-top: 23px;
      text-align: center;
      font-size: 18px;
    }

    .ygc-box {
      margin-top: 80px;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      
      .b-cover {
        width: 420px;
      }

      .b-left {
        margin-right: 166px;

        .bl-title {
          color: @color-red;
          font-size: 30px;
        }

        .bl-desc {
          margin-top: 19px;
          font-size:  18px;
          color: #666;
        }

        .bl-list {
          margin-top: 40px;

          .text {
            margin-bottom: 19px;
            font-size: 16px;
            display: flex;
            align-items: center;
            font-weight: bold;

            .red {
              font-style: normal;
              font-size: 18px;
              color: @color-red;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      &.box2 {
        flex-direction: row;
        margin-top: 60px;

        .b-left {
          margin-right: 0;
          margin-left: 189px;
        }
      }
    }
  }
}

/* 响应式网站开发 */
.xyswzkf-title {
  width: 1200px;
  margin: 120px auto 0;
  text-align: center;
  font-size: 36px;
  color: #262933;

  .yellow {
    color: @color-yellow;
  }
}

.xyswzkf-desc {
  width: 1200px;
  margin: 21px auto 0;
  text-align: center;
  font-size: 18px;
}

.xyswzkf-content {
  padding-top: 79px;

  .xc-center {
    width: 1200px;
    margin: 0 auto;
    
    .xcc-label {
      overflow: hidden;

      .xccl-box {
        float: left;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: @color-blue;
        overflow: hidden;

        .cover {
          height: 143px;
          box-sizing: border-box;

          img {
            display: block;
            margin: 0 auto;
          }
        }

        .text {
          color: #fff;
          font-size: 18px;
          text-align: center;
          overflow: hidden;
        }
      }

      .xccl-icon {
        float: left;
        width: 133px;
        height: 200px;
        background: url(/images/icon-jia.png) center / 56px no-repeat
      }
    }

    .xcc-list {
      margin-top: 120px;
      display: flex;
      align-items: center;
      overflow: hidden;

      .item {
        flex: 1;
        margin-right: 62px;

        .i-title {
          font-size: 24px;
          color: #262933;
        }

        .i-desc {
          margin-top: 34px;
          font-size: 14px;
          line-height: 24px;
        }
      }

      .cover {
        width: 338px;
        height: 338px;
        border: 11px solid #E6E6E6;
        border-radius: 50%;
        overflow: hidden;
      }

      &.list2 {
        margin-top: 80px;

        .item {
          margin-right: 0;
          margin-left: 73px;

          .i-title {
            text-align: right;
          }
  
          .i-desc {
            margin-top: 29px;
  
            .id-p {
              margin-bottom: 20px;
  
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}

.xyswzkf-flow {
  padding-top: 120px;

  .xf-center {
    width: 1200px;
    margin: 0 auto;

    .xfc-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .xfc-desc {
      margin-top: 21px;
      text-align: center;
      font-size: 18px;
    }

    .xfc-list {
      margin-top: 36px;
      position: relative;

      .line {
        position: absolute;
        top: 40px;
        right: 0;
        left: 0;
        height: 10px;
        border-radius: 10px;
        background-color: #E6E6E6;
      }

      .xfcl-ul {
        display: flex;
        align-items: flex-start;
        justify-content: space-around;

        .xfclu-li {
          position: relative;
          text-align: center;

          .cover {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 4px solid #F2F2F2;
            display: block;
            margin: 0 auto;
            overflow: hidden;

            &.icon1 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/e74062336aa2487197175cb74a4ab0ed.png) center / 80px no-repeat;
            }

            &.icon2 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/db260b27b31d48448ad1839ab999b322.png) center / 80px no-repeat;
            }

            &.icon3 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/68c6bdbb18e740d38619c5b804572c43.png) center / 80px no-repeat;
            }

            &.icon4 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/b678bea0459140ef96c1ebc46938879e.png) center / 80px no-repeat;
            }

            &.icon5 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/c0b11a1d09474a708e10e44f199b66ad.png) center / 80px no-repeat;
            }

            &.icon6 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/b17a258be5b34f6993b9491e03147c11.png) center / 80px no-repeat;
            }

            &.icon7 {
              background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/912fa117f8084594b1ffde08d27081ae.png) center / 80px no-repeat;
            }
          }

          .title {
            margin-top: 20px;
            font-size: 18px;
          }

          .desc {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
          }
        }
      }
    }
  }
}

.xyswzkf-criteria {
  margin-top: 119px;
  background-color: #212121;
  min-height: 550px;
  position: relative;

  .xc-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/5b14dc26f8ef457b99d0f28c14c1d420.jpg) center / cover no-repeat;
  }

  .xc-center {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .xcc-info {
      max-width: 50%;
      float: left;
      padding: 80px 0;

      .i-title {
        position: relative;
        color: #fff;
        font-size: 24px;
        padding-bottom: 29px;

        &::after {
          content: '';
          width: 140px;
          height: 2px;
          background-color: #fff;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }

      .i-ul {
        margin-top: 50px;

        .iu-li {
          margin-bottom: 39px;

          .iul-title {
            color: #fff;
            font-size: 18px;
          }

          .iul-desc {
            color: #fff;
            font-size: 14px;
            margin-top: 9px;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

/* 微信小程序设计 */
.wxxcxsj-explain {
  padding-top: 90px;

  .we-center {
    width: 1200px;
    margin: 0 auto;

    .wec-title {
      text-align: center;
      font-size: 36px;
      color: #262933;
    }

    .wec-desc {
      text-align: center;
      margin-top: 21px;
      font-size: 18px;
    }

    .wec-content {
      padding-top: 79px;
      display: flex;
      align-items: center;
      justify-content: center;

      .wecc-box {
        margin-right: 40px;
        display: flex;
        align-items: center;

        .b-ul {
          width: 300px;
          height: 340px;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;
          justify-content: space-between;

          .bu-li {
            width: 140px;
            height: 160px;
            border-radius: 15px;
            overflow: hidden;

            .cover {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 110px;
            }

            .text {
              color: #fff;
              text-align: center;
              font-size: 18px;
            }

            &.li1 {
              background-color: #ff8365;

              .cover {
                background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/3411eb3efff640b898c02e467acc0bee.jpg) center / 58px no-repeat;
              }
            }

            &.li2 {
              background-color: #3cb2ef;

              .cover {
                background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/4597888a68ad4c549522f1aa39663979.jpg) center / 58px no-repeat;
              }
            }

            &.li3 {
              background-color: #b165ff;

              .cover {
                background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/8155c42d66524aba99a96f6ecc6127e8.jpg) center / 58px no-repeat;
              }
            }

            &.li4 {
              background-color: #fdb736;

              .cover {
                background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/bf578c5f5bd34d37ae36b84508574917.jpg) center / 58px no-repeat;
              }
            }
          }
        }

        .b-find {
          margin-left: 60px;

          .icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221112/2952ed46b7204da9937f688db3ff3b98.png) center no-repeat;
            overflow: hidden;
          }

          .text {
            margin-top: 10px;
            text-align: center;
            font-size: 22px;
          }
        }
      }
    }
  }
}

.wxxcxsj-service {
  padding-top: 120px;

  .ws-center {
    width: 1200px;
    margin: 0 auto;

    .wsc-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .wsc-desc {
      text-align: center;
      font-size: 18px;
      margin-top: 21px;
    }

    .wsc-ul {
      margin-top: 58px;
      margin-left: -26px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .wscu-li {
        float: left;
        margin-left: 26px;
        width: 280px;
        min-height: 364px;
        background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/602fae63057446e7b9a1de0ed496d297.jpg) center / cover no-repeat;
        border-radius: 15px;
        overflow: hidden;

        .li-title {
          padding: 20px;

          .ch {
            color: #fff;
            font-size: 18px;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .en {
            color: #fff;
            font-size: 12px;
            position: relative;
            padding-bottom: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &::after {
              content: '';
              width: 20px;
              height: 1px;
              background-color: #fff;
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
        }

        .li-list {
          padding: 15px 12px 0 12px;

          .l-title {
            flex: 1;
            color: #fff;
            font-weight: bold;
            font-size: 16px;
            display: flex;
            align-items: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &::before {
              content: '';
              width: 2px;
              height: 2px;
              border: 3px solid #00EAFF;
              border-radius: 50%;
              margin-right: 4px;
            }
          }

          .l-desc {
            color: #fff;
            font-size: 12px;
            margin-top: 13px;
            height: 32px;
            line-height: 16px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          &.sign {
            padding-top: 0;
            height: 102px;
            overflow: hidden;

            .l-title {
              margin-top: 10px;
            }

            .l-desc {
              height: 48px;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }
      }
    }
  }
}

.wxxcxsj-flow {
  padding-top: 120px;

  .wf-center {
    width: 1200px;
    margin: 0 auto;

    .wfc-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .wfc-ul {
      margin-top: 70px;
      display: flex;
      align-items: flex-start;
      justify-content: space-around;

      .wfcu-li {
        text-align: center;
        position: relative;

        .cover {
          width: 90px;
          height: 90px;
          border-radius: 50%;
          border: 3px solid #FDB736;
          position: relative;
          margin: 0 auto;

          .num {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 30px;
            overflow: hidden;
            color: #fff;
            background-color: @color-yellow;
            position: absolute;
            top: 0;
            left: 0;
            font-style: normal;
            font-size: 16px;
          }

          &.icon1 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/6d171cd39f55476ab2359388f3c1e719.jpg) center / 42px no-repeat;
          }

          &.icon2 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/9dc64e1f65e641ae88c7d35eacb82ed0.jpg) center / 42px no-repeat;
          }

          &.icon3 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/09880947031b483b8702921766ab83db.jpg) center / 42px no-repeat;
          }

          &.icon4 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/42115f719116427bbc4b14a6e42cbe87.jpg) center / 42px no-repeat;
          }

          &.icon5 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/d91f6e8ed7b34868afd42b8b23bc26f7.jpg) center / 42px no-repeat;
          }
        }

        .title {
          margin-top: 19px;
          font-size: 18px;
        }

        .desc {
          margin-top: 10px;
          font-size: 14px;
        }
      }
    }
  }
}

.wxxcxsj-advantage {
  padding-top: 118px;

  .wa-center {
    width: 1200px;
    margin: 0 auto;

    .wac-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .wac-ul {
      margin-top: 28px;
      margin-left: -72px;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;

      .wacu-li {
        margin: 18px 0 0 72px;
        width: 246px;

        .cover {
          position: relative;
          width: 100%;
          height: 120px;
          border-radius: 12px;
          overflow: hidden;

          .c-text {
            color: #fff;
            font-size: 18px;
            text-align: center;
            position: absolute;
            top: 75px;
            right: 0;
            left: 0;
            padding: 0 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          &.bg1 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/c13f8e22897c4317a5732ba3f4153784.jpg) center / cover no-repeat;
          }

          &.bg2 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/591d092be6244c078bba32c393ba054f.jpg) center / cover no-repeat;
          }

          &.bg3 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/53a3e810da674c5385c257f8dacfc483.jpg) center / cover no-repeat;
          }

          &.bg4 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/846bdfc4b7a149209d81f207a3e9735e.jpg) center / cover no-repeat;
          }

          &.bg5 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/e6c075eb7e2946a8a1d6c46af5deb3d6.jpg) center / cover no-repeat;
          }

          &.bg6 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/6fc17039482441d2b813926f2aca4511.jpg) center / cover no-repeat;
          }

          &.bg7 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/79c5ef9afd18407aba53b005c2fadde8.jpg) center / cover no-repeat;
          }

          &.bg8 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/f2869ed8ba1e4480b3fb52760b748fee.jpg) center / cover no-repeat;
          }
        }

        .item {
          padding: 20px 0;
          text-align: center;
          font-size: 14px;
          height: 32px;
          line-height: 16px;
          color: #666;
          overflow: hidden;
        }
      }
    }
  }
}

.wxxcxsj-entrance {
  padding-top: 100px;

  .we-center {
    width: 1200px;
    margin: 0 auto;

    .wec-title {
      font-size: 36px;
      text-align: center;
      color: #262933;
    }

    .wec-ul {
      padding-bottom: 110px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }
      
      .wecu-li {
        float: left;
        margin-top: 40px;
        width: 400px;
        display: flex;
        align-items: center;

        .cover {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          overflow: hidden;

          &.icon1 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/ccc1a739adb648dab641ba44b9cfa478.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(7,186,254,0.3);
          }

          &.icon2 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/3aa286e15a084ceabd38898d6394baa8.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(6,220,197,0.3);
          }

          &.icon3 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/7e17caa6d0ee457da5dc1f4bfb0e591b.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(254,192,72,0.3);
          }

          &.icon4 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/3491b43f7f1f42c9901974fea65254f9.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(254,127,76,0.3);
          }

          &.icon5 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/fc021b7116ba470bae1df39f87c10a64.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(160,127,254,0.3);
          }

          &.icon6 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/de3f70c839c94637a0ad6aae3a101d91.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(252,94,94,0.3);
          }

          &.icon7 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/f0c9e36c91d54265a4398cedb1098dfa.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(3,183,250,0.3);
          }

          &.icon8 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/a946933b2a0e4124b92c82e6e60a1195.png) center / 60px no-repeat;
            box-shadow: 3px 4px 8px 0px rgba(245,89,129,0.3);
          }

          &.icon9 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/b4e512337fdb4bdf8f81c8bd8c65f07a.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(100,185,241,0.3);
          }

          &.icon10 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/4a113fa669bd445da4ff0937089941a8.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(7,211,152,0.3);
          }

          &.icon11 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/76b9e75072bf409cb3617b1e4972d0dc.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(159,88,245,0.3);
          }

          &.icon12 {
            background: url(https://ys-cc.oss-cn-chengdu.aliyuncs.com/upload/20221114/080f00595c1746929722038c3b9ac373.png) center / 60px no-repeat;
            box-shadow: 0px 5px 8px 0px rgba(15,185,91,0.3);
          }
        }

        .item {
          flex: 1;
          padding-left: 20px;
          box-sizing: border-box;
          overflow: hidden;

          .i-title {
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .i-desc {
            font-size: 14px;
            margin-top: 8px;
            color: #666;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

/* 新闻资讯 */
.page-title {
  padding-top: 31px;
  
  .title {
    width: 200px;
    text-align: center;
    font-size: 36px;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    display: block;
    margin: 0 auto;
  }
}

.xwzx-type {
  padding-top: 29px;

  .xt-center {
    width: 1200px;
    margin: 0 auto;

    .xtc-ul {
      background-color: #fff;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .xtcu-li {
        float: left;
        width: 200px;
        text-align: center;
        height: 60px;
        line-height: 60px;
        overflow: hidden;

        a {
          font-size: 16px;
          transition: all .3s;

          &:hover {
            color: @color-blue;
            transition: all .3s;
          }
        }

        &.on {
          background-color: @color-blue;

          a {
            color: #fff;
          }
        }
      }
    }
  }
}

.xwzx-list {
  padding-top: 30px;

  .xl-center {
    width: 1200px;
    margin: 0 auto;

    &::after {
      content: '';
      clear: both;
      display: block;
    }

    .xlc-list {
      float: left;
      width: 900px;
      background-color: #fff;
      overflow: hidden;

      .xlc-ul {
        padding: 30px 0 0 30px;
  
        .xlcu-li {
          margin: 0 30px 30px 0;
          display: flex;
  
          .cover {
            width: 300px;
            height: 224px;
            margin-right: 30px;
            display: block;
            overflow: hidden;
  
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: all .3s;
  
              &:hover {
                transform: scale(1.1);
                transition: all .3s;
              }
            }
          }
  
          .item {
            flex: 1;
            overflow: hidden;
            display: grid;
            align-content: space-between;
  
            .title {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              a {
                font-size: 18px;
                transition: all .3s;

                &:hover {
                  color: @color-blue;
                  transition: all .3s;
                }
              }
            }
  
            .date-view {
              // margin-top: 20px;
              overflow: hidden;
  
              .date {
                float: left;
                color: #999;
                font-size: 14px;
                margin-right: 99px;
              }
  
              .view {
                float: left;
                color: #999;
                font-size: 14px;
                display: flex;
                align-items: center;

                &::before {
                  content: '';
                  width: 14px;
                  height: 10px;
                  background: url(/images/icon-eye.png) center / 14px no-repeat;
                  margin-right: 5px;
                }
              }
            }
  
            .desc {
              // margin-top: 30px;
              height: 72px;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3;
  
              a {
                font-size: 14px;
                line-height: 24px;
                color: #666;
              }
            }

            .label {
              overflow: hidden;
              
              .l-a {
                float: left;
                height: 24px;
                line-height: 24px;
                border: 1px solid @color-orange;
                color: @color-orange;
                font-size: 12px;
                box-sizing: border-box;
                border-radius: 2px;
                padding: 0 10px;
                margin: 0 5px 5px 0;
              }
            }
  
            .tool {
              // margin-top: 20px;
              
              &::after {
                content: '';
                clear: both;
                display: block;
              }
  
              .t-btn {
                float: left;
                width: 190px;
  
                &.wxzx {
                  margin-right: 60px;
                  position: relative;
  
                  .wxzx-a {
                    display: block;
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    background-color: @color-blue;
                    color: #fff;
                    font-size: 18px;
                    text-align: center;
                  }
  
                  .qrcode {
                    width: 160px;
                    height: 160px;
                    background-color: #fff;
                    box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.09);
                    padding: 5px;
                    box-sizing: border-box;
                    position: absolute;
                    bottom: 100%;
                    left: 50%;
                    transform: translate(-50%, -10px);
                    display: none;
  
                    img {
                      width: 100%;
                      height: 100%;
                      display: block;
                    }
                  }
  
                  &:hover .qrcode {
                    display: block;
                  }
                }
                
                &.zxyy {
                  height: 40px;
                  line-height: 40px;
                  text-align: center;
                  background-color: @color-yellow;
                  color: #fff;
                  font-size: 18px;
                }
              }
            }
          }
        }
      }
    }

    .xlc-right {
      float: left;
      margin-left: 24px;
      width: 276px;

      .xlcr-list {
        background-color: #fff;
        margin-bottom: 24px;

        .xlcrl-title {
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          border-bottom: 1px solid #e6e6e6;
          display: flex;
          align-items: center;
          justify-content: center;
  
          .icon {
            width: 21px;
            height: 21px;
            background: url(/images/icon-book.png) center / 21px no-repeat;
            margin-right: 6px;
          }
  
          .text {
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .xlcrl-ul {
          padding: 0 20px 20px 20px;

          .xlcrlu-li {
            margin-top: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .l-a {
              font-size: 14px;
              transition: all .3s;

              &:hover {
                color: @color-blue;
                transition: all .3s;
              }
            }
          }
        }
      }

      .xlcr-label {
        background-color: #fff;
        padding: 19px;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        margin-bottom: 24px;

        .xlcrl-a {
          flex: calc(50% - 2px);
          margin: 1px;
          background-color: #e6e6e6;
          text-align: center;
          height: 35px;
          line-height: 35px;
          font-size: 14px;
          border-radius: 2px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          transition: all .3s;

          &:hover {
            transition: all .3s;
            opacity: .8;
          }
        }
      }

      .r-type {
        background-color: #fff;
        padding-top: 20px;

        .rt-title {
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            width: 21px;
            height: 21px;
            background: url(/images/icon-book.png) center / 21px no-repeat;
            margin-right: 6px;
          }

          .text {
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .rt-form {
          padding: 10px 20px 30px 20px;

          .f-input {
            margin-top: 10px;
            border: 1px solid #e6e6e6;
            width: 100%;
            height: 38px;
            line-height: 38px;
            padding: 0 10px;
            box-sizing: border-box;
            font-size: 14px;
          }

          .f-textarea {
            resize: none;
            border: 1px solid #e6e6e6;
            width: 100%;
            box-sizing: border-box;
            padding: 10px;
            line-height: 24px;
            margin-top: 10px;
            font-size: 14px;
            min-height: 120px;
          }

          .f-save {
            margin-top: 10px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: @color-blue;
            border: 1px solid @color-blue;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all .3s;

            &:hover {
              transition: all .3s;
              opacity: .8;
            }
          }
        }
      }
    }
  }
}

/* 新闻资讯详情 */
.xwzxxq-box {
  padding-top: 19px;

  .xb-center {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;

    .xbc-left {
      background-color: #fff;
      flex: 1;
      margin-right: 20px;
      padding: 0 40px 120px 40px;
      box-sizing: border-box;
      overflow: hidden;

      .l-title {
        margin-top: 40px;
        font-size: 24px;
        line-height: 24px;
        font-family: Adobe Heiti Std;
      }

      .l-date_type_view {
        margin-top: 29px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .date {
          color: #999;
          font-size: 14px;
        }

        .type {
          color: #999;
          font-size: 14px;
        }
      }

      .l-content {
        margin-top: 60px;

        img {
          max-width: 100% !important;
          margin: 10px 0;
        }

        * {
          line-height: 26px;
        }
      }

      .l-label {
        margin-top: 10px;
        overflow: hidden;

        .ll-a {
          float: left;
          margin: 10px 10px 0 0;
          background-color: @color-orange;
          padding: 0 10px;
          box-sizing: border-box;
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #fff;
          border-radius: 2px;
          transition: all .3s;
        }
      }

      .l-notice {
        font-size: 14px;
        color: #999;
        margin-top: 20px;

        a {
          color: #999;
        }
      }

      .l-page {
        margin-top: 60px;
        
        &::after {
          content: '';
          clear: both;
          display: block;
        }

        .lp-list {
          max-width: calc(50% - 5px);
          float: left;
          display: flex;
          align-items: flex-start;

          .cover {
            width: 118px;
            height: 88px;
            margin-right: 10px;
          }

          .item {
            overflow: hidden;

            .i-tips {
              font-size: 18px;
            }

            .i-title {
              margin-top: 10px;
              font-size: 14px;
              color: #666;
              transition: all .3s;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }

          &.fr {
            float: right;
          }

          &:hover .i-title {
            transition: all .3s;
            color: @color-blue;
          }
        }
      }
    }

    .xbc-right {
      width: 290px;
      
      .r-type {
        background-color: #fff;
        margin-bottom: 20px;

        .rt-logo {
          padding-top: 30px;

          img {
            width: 100px;
            height: 100px;
            display: block;
            margin: 0 auto;
          }
        }

        .rt-title {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 19px;

          .icon {
            width: 21px;
            height: 21px;
            background: url(/images/icon-book.png) center / 21px no-repeat;
            margin-right: 6px;
          }

          .text {
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .rt-ul {
          margin-top: 28px;
          padding: 0 20px 20px 20px;

          .rtu-li {
            border: 1px solid #f0f0f0;
            height: 34px;
            line-height: 34px;
            padding: 0 20px;
            box-sizing: border-box;
            margin-bottom: 10px;
            transition: all .3s;

            a {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .text {
                font-size: 14px;
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: all .3s;
              }
              
              .icon {
                width: 8px;
                font-size: 14px;
                font-family: Arial;
                font-style: normal;
                transition: all .3s;
              }
            }

            &:hover {
              background-color: @color-blue;
              border-color: @color-blue;
              transition: all .3s;

              .text, .icon {
                color: #fff;
              }
            }
          }
        }
      }

      .r-case {
        margin-bottom: 20px;

        .rc-ul {
          margin-left: -20px;

          &::after {
            content: '';
            clear: both;
            display: block;
          }

          .rcu-li {
            float: left;
            margin: 0 0 20px 20px;
            width: 135px;
            background-color: #fff;
            // box-shadow: 0 0 8px rgba(117,117,117,.1);

            .cover {
              width: 100%;
              height: 85px;
              display: block;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all .3s;

                &:hover {
                  transform: scale(1.1);
                  transition: all .3s;
                }
              }
            }

            .title {
              display: block;
              padding: 0 10px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              transition: all .3s;

              &:hover {
                color: @color-blue;
                transition: all .3s;
              }
            }
          }
        }

        .rc-more {
          display: block;
          width: 100%;
          height: 40px;
          line-height: 40px;
          border-radius: 2px;
          text-align: center;
          background-color: @color-orange;
          font-size: 16px;
          color: #fff;
          transition: all .3s;

          &:hover {
            opacity: .8;
            transition: all .3s;
          }
        }
      }

      .r-contact {
        background-color: #fff;
        padding-bottom: 30px;

        .rc-title {
          padding-top: 30px;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon {
            width: 22px;
            height: 22px;
            margin-right: 6px;
            background: url(/images/icon-phone2.png) center / 22px no-repeat;
          }

          .text {
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .rc-phone {
          margin-top: 27px;
          font-size: 14px;
          text-align: center;
        }

        .rc-address {
          margin-top: 20px;
          font-size: 14px;
          text-align: center;
        }
      }
    }
  }
}

/* 空数据 */
.null {
  padding: 100px 0;

  .n-cover {
    width: 200px;
    display: block;
    margin: 0 auto;
    background-color: transparent;
  }

  .n-text {
    text-align: center;
    font-size: 14px;
    color: #999;
    margin: 20px 0 100px;
  }
}

/* 404 */
.error {
  width: 1200px;
  margin: 0 auto;
  padding: 50px 0;

  .e-cover {
    width: 500px;
    display: block;
    margin: 0 auto;
    background-color: transparent;
  }

  .e-notice {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 50px;
  }

  .e-tool {
    margin: 20px 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    .et-btn {
      height: 40px;
      line-height: 40px;
      width: 120px;
      text-align: center;
      background-color: @color-blue;
      border: 1px solid @color-blue;
      color: #fff;
      font-size: 16px;
      margin: 0 10px;
      transition: all .3s;

      &:hover {
        opacity: .8;
        transition: all .3s;
      }
    }
  }

  .e-xwzx {
    display: flex;
    align-items: flex-start;

    .ex-label {
      font-size: 14px;
      margin-bottom: 10px;
    }

    .ex-a {
      font-size: 14px;
      margin: 0 10px 10px 0;
      transition: all .3s;

      &:hover {
        color: @color-blue;
        transition: all .3s;
      }
    }
  }
}

/* 分页 */
.page {
  margin: 120px 0;
  text-align: center;

  .p-list {
    display: inline-block;
    vertical-align: middle;

    &::after {
      content: '';
      clear: both;
      display: block;
    }

    .pl-a {
      float: left;
      width: 39px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      box-sizing: border-box;
      margin: 0 5px;
      border: 1px solid #DFE5F0;
      background-color: #fff;
      color: #666;
      font-size: 14px;
      transition: all .3s;

      &:hover {
        color: @color-blue;
        border-color: @color-blue;
        transition: all .3s;
      }

      &.on {
        background-color: @color-blue;
        border-color: @color-blue;
        color: #fff;
      }

      &.disabled {
        background-color: #DFE5F0;
        border: 1px solid #DFE5F0;
        font-family: Source Han Sans CN;
        color: #86ACE5;
        cursor: no-drop;
      }
    }
  }
}

/* 底部 */
.footer {

  .f-top {
    background-color: #212121;

    .ft-center {
      width: 1200px;
      margin: 0 auto;
      min-height: 245px;

      .ftc-ul {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 40px 0;

        .ftcu-li {
          position: relative;
          flex: 1;

          &::after {
            content: '';
            width: 1px;
            height: 155px;
            background-color: #999;
            position: absolute;
            top: 0;
            right: 0;
          }

          &:last-child::after {
            content: unset;
          }

          .title {
            font-size: 18px;
            color: #fff;
          }

          .info {
            margin-top: 30px;
            width: 210px;
            font-size: 14px;
            line-height: 28px;
            color: #999;
          }

          &.company-about {
            padding-right: 60px;
          }

          &.build {
            padding-left: 78px;

            .list {
              margin-top: 30px;

              a {
                color: #999;
                font-size: 14px;
                line-height: 28px;

                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }

          &.contact-us {
            display: flex;
            align-items: center;
            padding-left: 60px;

            .left {
              margin-right: 26px;

              .title {
                font-size: 18px;
                color: #fff;
                text-align: center;
              }

              .qrcode {
                width: 110px;
                height: 110px;
                display: block;
                margin-top: 16px;
              }

              .notice {
                font-size: 14px;
                margin-top: 10px;
                color: #ccc;
                text-align: center;
              }
            }

            .right {
              flex: 1;
              overflow: hidden;

              .tips {
                font-size: 14px;
                color: #fff;
                white-space: nowrap;
              }

              .phone {
                margin-top: 16px;
                font-size: 14px;
                color: #fff;
                white-space: nowrap;
              }

              .address {
                margin-top: 16px;
                font-size: 14px;
                color: #fff;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }

  .f-bottom {
    background-color: #181818;
    
    .fb-center {
      width: 1200px;
      margin: 0 auto;
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .fbc-left {
        color: #999;
        font-size: 14px;
      }

      .fbc-right {

        a {
          color: #999;
          font-size: 14px;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}

/* 浮动工具 */
.fixed-tool {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);

  .ft-dl {
    margin-bottom: 2px;
    position: relative;
    
    .ftd-dt {
      width: 50px;
      height: 50px;
      position: relative;
      z-index: 1;

      &.top {
        background: @color-yellow url(/images/icon-up.png) center / 25px no-repeat;
        cursor: pointer;
      }

      &.phone {
        background: @color-yellow url(/images/icon-phone.png) center / 25px no-repeat;
      }

      &.qrcode {
        background: @color-yellow url(/images/icon-qrcode.png) center / 25px no-repeat;
      }
    }

    .ftd-dd {
      position: absolute;
      left: 100%;
      transition: all .3s;

      &.dd-phone {
        background-color: @color-yellow;
        color: #fff;
        white-space: nowrap;
        position: absolute;
        top: 0;
        right: -300px;
        left: unset;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        transition: all .3s;
      }

      &.dd-qrcode {
        position: absolute;
        top: 0;
        right: -120px;
        left: unset;
        width: 120px;
        height: 120px;
        transition: all .3s;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    &:hover .dd-phone {
      right: 50px;
      transition: all .3s;
    }

    &:hover .dd-qrcode {
      right: 50px;
      transition: all .3s;
    }
  }
}

/* 代码商城 */
.header-popup {
  background-color: transparent;
  box-shadow: 0 0 0 transparent;

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;

    .hp-box {
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 0 3px rgba(0, 0, 0, .2);
      position: relative;
      padding: 20px;
      box-sizing: border-box;

      .hpb-close {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 18px;
        cursor: pointer;
      }

      .hpb-title {
        font-size: 14px;
        margin-bottom: 30px;
      }

      .hpb-inline {
        border: 1px solid #ccc;
        border-radius: 5px;
        position: relative;
        margin-bottom: 20px;
        display: block;

        .icon {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 39px;
          line-height: 38px;
          text-align: center;
          font-size: 16px;
        }

        .hpbi-input .el-input__inner {
          width: 100%;
          padding: 0 10px 0 40px;
          box-sizing: border-box;
          border: 0;
          background-color: transparent;
          border-radius: 0;
          height: 38px;
          line-height: 38px;
        }
      }

      .hpb-agreement {
        margin-bottom: 20px;

        .el-checkbox, .el-checkbox__input {
          cursor: unset;
        }

        .el-checkbox__label {
          color: initial;
        }

        .hpba-a {
          color: @color-blue;
        }
      }

      .hpb-button {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        border: 0;
        background-color: @color-blue;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}

.screen-shop {
  margin-top: 10px;

  .ss-center {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px 20px 0;
    box-sizing: border-box;

    .ssc-dl {
      display: flex;
      align-items: flex-start;
      font-size: 14px;
      padding-bottom: 10px;

      .sscd-dt {
        font-weight: bold;
        width: 100px;
        margin-bottom: 10px;
      }

      .sscd-dd {
        flex: 1;

        .sscdd-a {
          float: left;
          margin: 0 10px 10px 0;
          transition: all .3s;
          display: flex;
          align-items: center;

          &::before {
            content: '';
            font-size: 10px;
            font-family: element-icons!important;
            color: #fff;
            width: 12px;
            height: 12px;
            line-height: 12px;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #e6e6e6;
            margin-right: 5px;
            transition: all .3s;
          }

          &:hover {
            color: @color-blue;
            transition: all .3s;

            &::before {
              border-color: @color-blue;
              transition: all .3s;
            }
          }

          &.on {
            color: @color-blue;

            &::before {
              content: '\e6da';
              background-color: @color-blue;
              border-color: @color-blue;
            }
          }
        }

        .d-select {
          float: left;
          margin: 0 10px 10px 0;
          position: relative;

          .ds-text {
            height: 20px;
            line-height: 20px;
            padding: 0 5px 0 10px;
            border-radius: 2px;
            border: 1px solid #e6e6e6;
            font-size: 14px;
            display: flex;
            align-items: center;

            &::after {
              content: '\e6df';
              font-family: element-icons!important;
              font-size: 14px;
              margin-left: 5px;
            }
          }

          .ds-list {
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            z-index: 1;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            border-top: 0;
            display: none;

            .dsl-a {
              display: block;
              height: 30px;
              line-height: 30px;
              padding: 0 10px;

              &:hover {
                background-color: #f5f5f5;
              }
            }
          }

          &:hover .ds-list {
            display: block;
          }
        }
      }
    }
  }
}

.list-shop {
  
  .ls-center {
    width: 1200px;
    margin: 0 auto;

    .lsc-ul {
      margin-bottom: 20px;

      &::after {
        content: '';
        clear: both;
        display: block;
      }

      .lscu-li {
        float: left;
        width: 240px;
        height: 350px;
        box-shadow: 0 0 1px #999;
        background-color: #fff;
        transition: all .3s;
        position: relative;

        .cover {
          width: 100%;
          height: 144px;
          background-color: #F5F7FA;
          overflow: hidden;

          a {
            display: block;
          }
        }

        .content {
          
        }

        &:hover {
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
          transition: all .3s;
          z-index: 1;
        }
      }
    }

    .page-shop {
      margin: 0;
      padding: 20px 0 40px;
    }
  }
}